@webqit/oohtml 3.1.13 → 3.2.0
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 +212 -217
- package/dist/bindings-api.js +1 -1
- package/dist/bindings-api.js.map +2 -2
- package/dist/context-api.js +1 -1
- package/dist/context-api.js.map +1 -1
- package/dist/data-binding.js +8 -8
- package/dist/data-binding.js.map +2 -2
- package/dist/html-imports.js +1 -1
- package/dist/html-imports.js.map +2 -2
- package/dist/main.js +25 -23
- package/dist/main.js.map +3 -3
- package/dist/main.lite.js +23 -21
- package/dist/main.lite.js.map +3 -3
- package/dist/namespaced-html.js +1 -1
- package/dist/namespaced-html.js.map +3 -3
- package/dist/scoped-css.js +5 -3
- package/dist/scoped-css.js.map +3 -3
- package/dist/scoped-js.js +1 -1
- package/dist/scoped-js.js.map +3 -3
- package/package.json +3 -3
- package/src/bindings-api/DOMBindingsContext.js +1 -1
- package/src/bindings-api/index.js +21 -21
- package/src/data-binding/index.js +4 -19
- package/src/html-imports/HTMLImportsContext.js +1 -3
- package/src/html-imports/index.js +7 -1
- package/src/index.js +3 -3
- package/src/namespaced-html/DOMNamingContext.js +54 -0
- package/src/namespaced-html/index.js +237 -60
- package/src/scoped-css/index.js +108 -16
- package/src/scoped-js/index.js +48 -25
- package/src/util.js +38 -0
- package/test/scoped-css.test.js +2 -2
- package/src/scoped-js/Hash.js +0 -26
package/README.md
CHANGED
|
@@ -17,6 +17,185 @@ Building Single Page Applications? OOHTML is a special love letter! Writing Web
|
|
|
17
17
|
|
|
18
18
|
</details>
|
|
19
19
|
|
|
20
|
+
## Polyfill
|
|
21
|
+
|
|
22
|
+
OOHTML is being developed as something to be used today. This implementation adheres closely to the spec and evolves the proposal through a practice-driven process.
|
|
23
|
+
|
|
24
|
+
<details><summary>Load from a CDN<br>
|
|
25
|
+
└───────── <a href="https://bundlephobia.com/result?p=@webqit/oohtml"><img align="right" src="https://img.shields.io/badge/21.8%20kB-black"></a></summary>
|
|
26
|
+
|
|
27
|
+
```html
|
|
28
|
+
<script src="https://unpkg.com/@webqit/oohtml/dist/main.lite.js"></script>
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
└ This is to be placed early on in the document and should be a classic script without any `defer` or `async` directives!
|
|
32
|
+
|
|
33
|
+
> For `@webqit/oohtml@3.1` and below, you would need an external polyfill - like the [samthor/scoped](https://github.com/samthor/scoped) polyfill - for the Scoped Styles feature:
|
|
34
|
+
>
|
|
35
|
+
> ```html
|
|
36
|
+
> <head>
|
|
37
|
+
> <script src="https://unpkg.com/style-scoped/scoped.min.js"></script>
|
|
38
|
+
> </head>
|
|
39
|
+
> ```
|
|
40
|
+
|
|
41
|
+
</details>
|
|
42
|
+
|
|
43
|
+
<details><summary>Install from NPM<br>
|
|
44
|
+
└───────── <a href="https://npmjs.com/package/@webqit/oohtml"><img align="right" src="https://img.shields.io/npm/v/@webqit/oohtml?style=flat&label=&colorB=black"></a></summary>
|
|
45
|
+
|
|
46
|
+
```bash
|
|
47
|
+
npm i @webqit/oohtml @webqit/quantum-js
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
```js
|
|
51
|
+
// Import
|
|
52
|
+
import * as Quantum from '@webqit/quantum-js/lite'; // Or from '@webqit/quantum-js'; See implementation notes below
|
|
53
|
+
import init from '@webqit/oohtml';
|
|
54
|
+
|
|
55
|
+
// Initialize the lib
|
|
56
|
+
init.call(window, Quantum[, options = {}]);
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
└ To use the polyfill on server-side DOM instances as made possible by libraries like [jsdom](https://github.com/jsdom/jsdom), simply install and initialize the library with the DOM instance as above.
|
|
60
|
+
|
|
61
|
+
└ But all things "SSR" for OOHTML are best left to the [`@webqit/oohtml-ssr`](https://github.com/webqit/oohtml-ssr) package!
|
|
62
|
+
|
|
63
|
+
</details>
|
|
64
|
+
|
|
65
|
+
<details><summary>Extended usage concepts</summary>
|
|
66
|
+
|
|
67
|
+
If you'll be going ahead to build a real app with OOHTML, you may want to consider also using:
|
|
68
|
+
|
|
69
|
+
+ the [`@webqit/oohtml-cli`](https://github.com/webqit/oohtml-cli) package for operating a file-based templating system.
|
|
70
|
+
|
|
71
|
+
+ the modest, OOHTML-based [Webflo](https://github.com/webqit/webflo) framework to greatly streamline your workflow!
|
|
72
|
+
|
|
73
|
+
</details>
|
|
74
|
+
|
|
75
|
+
<details><summary>Implementation Notes</summary>
|
|
76
|
+
|
|
77
|
+
+ **Scoped/Quantum Scripts**. This feature is an extension of [Quantum JS](https://github.com/webqit/quantum-js). While the main OOHTML build is based on the main Quantum JS APIs, a companion "OOHTML Lite" build is also available based on the [Quantum JS Lite](https://github.com/webqit/quantum-js#quantum-js-lite) edition. The trade-off is in the execution timing of `<script quantum></script>` and `<script scoped></script>` elements: being "synchronous/blocking" with the former, and "asynchronous/non-blocking" with the latter! (See [`async`/`defer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes).)
|
|
78
|
+
|
|
79
|
+
Of the two, the "OOHTML Lite" edition is the recommend option on web pages (as used above) for faster load times unless there's a requirment to emulate the [native synchronous timing](https://html.spec.whatwg.org/multipage/parsing.html#scripts-that-modify-the-page-as-it-is-being-parsed) of classic scripts, in which case you'd need the main OOHTML build:
|
|
80
|
+
|
|
81
|
+
```html
|
|
82
|
+
<head>
|
|
83
|
+
<script src="https://unpkg.com/@webqit/oohtml/dist/main.js"></script>
|
|
84
|
+
</head>
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
└─ <a href="https://bundlephobia.com/result?p=@webqit/oohtml"><img align="right" src="https://img.shields.io/bundlephobia/minzip/@webqit/oohtml?label=&style=flat&colorB=black"></a>
|
|
88
|
+
|
|
89
|
+
+ **Loading Requirements**. As specified above, the OOHTML script tag is to be placed early on in the document and should be a classic script without any `defer` or `async` directives!
|
|
90
|
+
|
|
91
|
+
If you must load the script "async", one little trade-off would have to be made for `<script scoped>` and `<script quantum>` elements to have them ignored by the browser until the polyfill comes picking them up: *employing a custom MIME type in place of the standard `text/javascript` and `module` types*, in which case, a `<meta name="scoped-js">` element is used to configure the polyfill to honor the custom MIME type:
|
|
92
|
+
|
|
93
|
+
```html
|
|
94
|
+
<head>
|
|
95
|
+
<meta name="scoped-js" content="script.mimeType=some-mime">
|
|
96
|
+
<script async src="https://unpkg.com/@webqit/oohtml/dist/main.lite.js"></script>
|
|
97
|
+
</head>
|
|
98
|
+
<body>
|
|
99
|
+
<script type="some-mime" scoped>
|
|
100
|
+
console.log(this); // body
|
|
101
|
+
</script>
|
|
102
|
+
</body>
|
|
103
|
+
```
|
|
104
|
+
|
|
105
|
+
The custom MIME type strategy also comes in as a "fix" for when in a browser or other runtime where the polyfill is not able to intercept `<script scoped>` and `<script quantum>` elements ahead of the runtime - e.g. where...
|
|
106
|
+
|
|
107
|
+
```html
|
|
108
|
+
<body>
|
|
109
|
+
<script scoped>
|
|
110
|
+
console.log(this); // body
|
|
111
|
+
</script>
|
|
112
|
+
</body>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
...still gives the `window` object in the console.
|
|
116
|
+
|
|
117
|
+
+ **Syntax**. The syntax for attribute names and API names across features - e.g. the `def` and `ref` attributes, the `expr` attribute - isn't finalized, and may change on subsequent iterations, albeit with same principle of operation. But the polyfill is designed to be configurable via meta tags, and to honour any such "overrides". Here's an example:
|
|
118
|
+
|
|
119
|
+
```html
|
|
120
|
+
<head>
|
|
121
|
+
<!-- Configurations come before the polyfil -->
|
|
122
|
+
<meta name="data-binding" content="attr.expr=expr;">
|
|
123
|
+
<meta name="namespaced-html" content="attr.id=id;">
|
|
124
|
+
<meta name="html-imports" content="attr.def=def; attr.ref=ref;">
|
|
125
|
+
<script src="https://unpkg.com/@webqit/oohtml/dist/main.js"></script>
|
|
126
|
+
<head>
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
Now, even when the default syntax change, your `def`, `ref`, etc. overrides will keep your implementation intact.
|
|
130
|
+
|
|
131
|
+
Additionally, you could employ a global prefix in your implementation:
|
|
132
|
+
|
|
133
|
+
```html
|
|
134
|
+
<meta name="webqit" content="prefix=wq;">
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
...which automatically applies to all `webqit` attributes and APIs (with the exception of the `scoped`, `quantum`, and `data-*` attributes), such that:
|
|
138
|
+
|
|
139
|
+
+ `<template def="foo"></template>` now becomes: `<template wq-def="foo"></template>`,
|
|
140
|
+
+ `<import ref="foo"></import>` now becomes: `<wq-import wq-ref="foo"></wq-import>`,
|
|
141
|
+
+ `document.import()` now becomes: `document.wqImport()`,
|
|
142
|
+
+ `document.bind()` now becomes: `document.wqBind()`,
|
|
143
|
+
+ `document.bindings` now becomes: `document.wqBindings`,
|
|
144
|
+
+ etc.
|
|
145
|
+
|
|
146
|
+
The following is the full syntax table.
|
|
147
|
+
|
|
148
|
+
Spec: **data-binding**
|
|
149
|
+
|
|
150
|
+
| Config | Default Syntax | Description |
|
|
151
|
+
| :----- | :------------- | :---------- |
|
|
152
|
+
| `attr.expr` | `expr` | The "expr" attribute for inline data binding. ([Docs](#inline-data-binding)) |
|
|
153
|
+
| `attr.itemIndex` | `data-index` | The "item index" attribute for assigning indexes to list items. ([Docs](#inline-data-binding)) |
|
|
154
|
+
|
|
155
|
+
Spec: **bindings-api**
|
|
156
|
+
|
|
157
|
+
| Config | Default Syntax | Description |
|
|
158
|
+
| :----- | :------------- | :---------- |
|
|
159
|
+
| `attr.bindingsreflection` | `bindings` | The attribute for exposing an element's bindings. |
|
|
160
|
+
| `api.bind` | `bind` | The `document.bind()` and `Element.prototype.bind()` methods. ([Docs](#the-bindings-api)) |
|
|
161
|
+
| `api.bindings` | `bindings` | The `document.bindings` and `Element.prototype.bindings` object properties. ([Docs](#the-bindings-api)) |
|
|
162
|
+
|
|
163
|
+
Spec: **context-api**
|
|
164
|
+
|
|
165
|
+
| Config | Default Syntax | Description |
|
|
166
|
+
| :----- | :------------- | :---------- |
|
|
167
|
+
| `attr.contextname` | `contextname` | The "context name" attribute on arbitrary elements. ([Docs](#the-context-api)) |
|
|
168
|
+
| `api.contexts` | `contexts` | The `document.contexts` and `Element.prototype.contexts` object properties. ([Docs](#the-context-api)) |
|
|
169
|
+
|
|
170
|
+
Spec: **html-imports**
|
|
171
|
+
|
|
172
|
+
| Config | Default Syntax | Description |
|
|
173
|
+
| :----- | :------------- | :---------- |
|
|
174
|
+
| `elements.import` | `import` | The tag name for "import" elements. ([Docs](#html-imports)) |
|
|
175
|
+
| `attr.def` | `def` | The "definition" attribute on the `<template>` elements. ([Docs](#module-definition)) |
|
|
176
|
+
| `attr.fragmentdef` | *Inherits the value of `attr.def`* | The "definition" attribute on a `<template>`'s contents. ([Docs](#module-definition)) |
|
|
177
|
+
| `attr.extends` | `extends` | The "extends" attribute for extending definitions. ([Docs](#module-inheritance)) |
|
|
178
|
+
| `attr.inherits` | `inherits` | The "inherits" attribute for inheriting definitions. ([Docs](#module-inheritance)) |
|
|
179
|
+
| `attr.ref` | `ref` | The "import ref" attribute on "import" elements. ([Docs](#declarative-module-imports)) |
|
|
180
|
+
| `attr.importscontext` | `importscontext` | The "importscontext" attribute on arbitrary elements. ([Docs](#imports-contexts)) |
|
|
181
|
+
| `api.def` | `def` | The readonly string property for accessing an element's "def" value. ([Docs](#module-definition)) |
|
|
182
|
+
| `api.defs` | `defs` | The readonly object property for accessing a `<template>`'s list of definitions. ([Docs](#module-definition)) |
|
|
183
|
+
| `api.import` | `import` | The `document.import()` and `Element.prototype.import()` methods. ([Docs](#imperative-module-imports)) |
|
|
184
|
+
|
|
185
|
+
Spec: **namespaced-html**
|
|
186
|
+
|
|
187
|
+
| Config | Default Syntax | Description |
|
|
188
|
+
| :----- | :------------- | :---------- |
|
|
189
|
+
| `attr.namespace` | `namespace` | The "namespace" attribute on arbitrary elements. ([Docs](#namespacing)) |
|
|
190
|
+
| `attr.id` | `id` | The "id" attribute on arbitrary elements. ([Docs](#namespacing)) |
|
|
191
|
+
| `api.namespace` | `namespace` | The "namespace" object property on arbitrary elements. ([Docs](#namespacing)) |
|
|
192
|
+
|
|
193
|
+
Spec: **scoped-css** (TODO)
|
|
194
|
+
|
|
195
|
+
Spec: **scoped-js** (TODO)
|
|
196
|
+
|
|
197
|
+
</details>
|
|
198
|
+
|
|
20
199
|
## Explainer
|
|
21
200
|
|
|
22
201
|
<details><summary>Show</summary>
|
|
@@ -46,9 +225,39 @@ OOHTML makes this possible by introducing "namespacing" and style and script sco
|
|
|
46
225
|
|
|
47
226
|
### Namespacing
|
|
48
227
|
|
|
49
|
-
Naming things is hard! That's especially so where you have one global namespace and a miriad of potentially conflicting
|
|
228
|
+
Naming things is hard! That's especially so where you have one global namespace and a miriad of potentially conflicting identifiers to coordinate!
|
|
50
229
|
|
|
51
|
-
Here, we get a modular naming convention using the `namespace` attribute. This attribute let's us
|
|
230
|
+
Here, we get a modular naming convention using the `namespace` attribute. This attribute let's us create a naming context for identifiers in a given subtree:
|
|
231
|
+
|
|
232
|
+
```html
|
|
233
|
+
<form>
|
|
234
|
+
|
|
235
|
+
<fieldset namespace>
|
|
236
|
+
<legend>Home Address</legend>
|
|
237
|
+
|
|
238
|
+
<label for="~address-line">Address</label>
|
|
239
|
+
<input id="address-line">
|
|
240
|
+
|
|
241
|
+
<label for="~city">City</label>
|
|
242
|
+
<input id="city">
|
|
243
|
+
<fieldset>
|
|
244
|
+
|
|
245
|
+
<fieldset namespace>
|
|
246
|
+
<legend>Delivery Address</legend>
|
|
247
|
+
|
|
248
|
+
<label for="~address-line">Address</label>
|
|
249
|
+
<input id="address-line">
|
|
250
|
+
|
|
251
|
+
<label for="~city">City</label>
|
|
252
|
+
<input id="city">
|
|
253
|
+
<fieldset>
|
|
254
|
+
|
|
255
|
+
</form>
|
|
256
|
+
```
|
|
257
|
+
|
|
258
|
+
This lets us have repeating structures with identical but non-conflicting identifiers and `IDREFS`.
|
|
259
|
+
|
|
260
|
+
And this also translates well to an object model:
|
|
52
261
|
|
|
53
262
|
```html
|
|
54
263
|
<div id="user" namespace>
|
|
@@ -58,8 +267,6 @@ Here, we get a modular naming convention using the `namespace` attribute. This a
|
|
|
58
267
|
<a id="email" href="mailto:joebloggs@example.com" >joebloggs@example.com</a>
|
|
59
268
|
</div>
|
|
60
269
|
```
|
|
61
|
-
|
|
62
|
-
**-->** *and this translates really well to an object model*:
|
|
63
270
|
|
|
64
271
|
```html
|
|
65
272
|
user
|
|
@@ -68,7 +275,7 @@ user
|
|
|
68
275
|
└── email
|
|
69
276
|
```
|
|
70
277
|
|
|
71
|
-
|
|
278
|
+
with a complementary API that exposes said structure to JavaScript applications:
|
|
72
279
|
|
|
73
280
|
```js
|
|
74
281
|
// The document.namespace API
|
|
@@ -1290,218 +1497,6 @@ const response = myElement.contexts.request(requestParams);
|
|
|
1290
1497
|
console.log(response.value.title);
|
|
1291
1498
|
```
|
|
1292
1499
|
|
|
1293
|
-
## Polyfill
|
|
1294
|
-
|
|
1295
|
-
OOHTML is being developed as something to be used today—via a polyfill. This is an intentional effort that in turn ensures that the proposal evolves through a practice-driven process.
|
|
1296
|
-
|
|
1297
|
-
<details><summary>Load from a CDN<br>
|
|
1298
|
-
└───────── <a href="https://bundlephobia.com/result?p=@webqit/oohtml"><img align="right" src="https://img.shields.io/badge/21.8%20kB-black"></a></summary>
|
|
1299
|
-
|
|
1300
|
-
```html
|
|
1301
|
-
<script src="https://unpkg.com/@webqit/oohtml/dist/main.lite.js"></script>
|
|
1302
|
-
```
|
|
1303
|
-
|
|
1304
|
-
└ This is to be placed early on in the document and should be a classic script without any `defer` or `async` directives!
|
|
1305
|
-
|
|
1306
|
-
└ For the Scoped Styles feature, you'd need an external polyfill like the [samthor/scoped](https://github.com/samthor/scoped) polyfill (more details below):
|
|
1307
|
-
|
|
1308
|
-
```html
|
|
1309
|
-
<head>
|
|
1310
|
-
<script src="https://unpkg.com/style-scoped/scoped.min.js"></script>
|
|
1311
|
-
</head>
|
|
1312
|
-
```
|
|
1313
|
-
|
|
1314
|
-
</details>
|
|
1315
|
-
|
|
1316
|
-
<details><summary>Install from NPM<br>
|
|
1317
|
-
└───────── <a href="https://npmjs.com/package/@webqit/oohtml"><img align="right" src="https://img.shields.io/npm/v/@webqit/oohtml?style=flat&label=&colorB=black"></a></summary>
|
|
1318
|
-
|
|
1319
|
-
```bash
|
|
1320
|
-
npm i @webqit/oohtml @webqit/quantum-js
|
|
1321
|
-
```
|
|
1322
|
-
|
|
1323
|
-
```js
|
|
1324
|
-
// Import
|
|
1325
|
-
import * as Quantum from '@webqit/quantum-js/lite'; // Or from '@webqit/quantum-js'; See implementation notes below
|
|
1326
|
-
import init from '@webqit/oohtml';
|
|
1327
|
-
|
|
1328
|
-
// Initialize the lib
|
|
1329
|
-
init.call(window, Quantum[, options = {}]);
|
|
1330
|
-
```
|
|
1331
|
-
|
|
1332
|
-
└ To use the polyfill on server-side DOM instances as made possible by libraries like [jsdom](https://github.com/jsdom/jsdom), simply install and initialize the library with the DOM instance as above.
|
|
1333
|
-
|
|
1334
|
-
└ But all things "SSR" for OOHTML are best left to the [`@webqit/oohtml-ssr`](https://github.com/webqit/oohtml-ssr) package!
|
|
1335
|
-
|
|
1336
|
-
</details>
|
|
1337
|
-
|
|
1338
|
-
<details><summary>Extended usage concepts</summary>
|
|
1339
|
-
|
|
1340
|
-
If you'll be going ahead to build a real app with OOHTML, you may want to consider also using:
|
|
1341
|
-
|
|
1342
|
-
+ the [`@webqit/oohtml-cli`](https://github.com/webqit/oohtml-cli) package for operating a file-based templating system.
|
|
1343
|
-
|
|
1344
|
-
+ the modest, OOHTML-based [Webflo](https://github.com/webqit/webflo) framework to greatly streamline your workflow!
|
|
1345
|
-
|
|
1346
|
-
</details>
|
|
1347
|
-
|
|
1348
|
-
<details><summary>Implementation Notes</summary>
|
|
1349
|
-
|
|
1350
|
-
+ **Scoped/Quantum Scripts**. This feature is an extension of [Quantum JS](https://github.com/webqit/quantum-js). While the main OOHTML build is based on the main Quantum JS APIs, a companion "OOHTML Lite" build is also available based on the [Quantum JS Lite](https://github.com/webqit/quantum-js#quantum-js-lite) edition. The trade-off is in the execution timing of `<script quantum></script>` and `<script scoped></script>` elements: being "synchronous/blocking" with the former, and "asynchronous/non-blocking" with the latter! (See [`async`/`defer`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#attributes).)
|
|
1351
|
-
|
|
1352
|
-
Of the two, the "OOHTML Lite" edition is the recommend option on web pages (as used above) for faster load times unless there's a requirment to emulate the [native synchronous timing](https://html.spec.whatwg.org/multipage/parsing.html#scripts-that-modify-the-page-as-it-is-being-parsed) of classic scripts, in which case you'd need the main OOHTML build:
|
|
1353
|
-
|
|
1354
|
-
```html
|
|
1355
|
-
<head>
|
|
1356
|
-
<script src="https://unpkg.com/@webqit/oohtml/dist/main.js"></script>
|
|
1357
|
-
</head>
|
|
1358
|
-
```
|
|
1359
|
-
|
|
1360
|
-
└─ <a href="https://bundlephobia.com/result?p=@webqit/oohtml"><img align="right" src="https://img.shields.io/bundlephobia/minzip/@webqit/oohtml?label=&style=flat&colorB=black"></a>
|
|
1361
|
-
|
|
1362
|
-
+ **Loading Requirements**. As specified above, the OOHTML script tag is to be placed early on in the document and should be a classic script without any `defer` or `async` directives!
|
|
1363
|
-
|
|
1364
|
-
If you must load the script "async", one little trade-off would have to be made for `<script scoped>` and `<script quantum>` elements to have them ignored by the browser until the polyfill comes picking them up: *employing a custom MIME type in place of the standard `text/javascript` and `module` types*, in which case, a `<meta name="scoped-js">` element is used to configure the polyfill to honor the custom MIME type:
|
|
1365
|
-
|
|
1366
|
-
```html
|
|
1367
|
-
<head>
|
|
1368
|
-
<meta name="scoped-js" content="script.mimeType=some-mime">
|
|
1369
|
-
<script async src="https://unpkg.com/@webqit/oohtml/dist/main.lite.js"></script>
|
|
1370
|
-
</head>
|
|
1371
|
-
<body>
|
|
1372
|
-
<script type="some-mime" scoped>
|
|
1373
|
-
console.log(this); // body
|
|
1374
|
-
</script>
|
|
1375
|
-
</body>
|
|
1376
|
-
```
|
|
1377
|
-
|
|
1378
|
-
The custom MIME type strategy also comes in as a "fix" for when in a browser or other runtime where the polyfill is not able to intercept `<script scoped>` and `<script quantum>` elements ahead of the runtime - e.g. where...
|
|
1379
|
-
|
|
1380
|
-
```html
|
|
1381
|
-
<body>
|
|
1382
|
-
<script scoped>
|
|
1383
|
-
console.log(this); // body
|
|
1384
|
-
</script>
|
|
1385
|
-
</body>
|
|
1386
|
-
```
|
|
1387
|
-
|
|
1388
|
-
...still gives the `window` object in the console.
|
|
1389
|
-
|
|
1390
|
-
+ **Scoped CSS**. This feature is only in "concept" implementation and doesn't work right now as is. The current implementation simply wraps `<style scoped>` blocks in an `@scope {}` block - which itself isn't supported in any browser *yet*. To try this "concept" implementation, set the `style.strategy` config to `@scope`:
|
|
1391
|
-
|
|
1392
|
-
```html
|
|
1393
|
-
<head>
|
|
1394
|
-
<meta name="scoped-css" content="style.strategy=@scope"> <!-- Must come before the polyfil -->
|
|
1395
|
-
<script src="https://unpkg.com/@webqit/oohtml/dist/main.js"></script>
|
|
1396
|
-
<head>
|
|
1397
|
-
```
|
|
1398
|
-
|
|
1399
|
-
Now the following `<style scoped>`...
|
|
1400
|
-
|
|
1401
|
-
```html
|
|
1402
|
-
<style scoped>
|
|
1403
|
-
h2 { color: red; }
|
|
1404
|
-
</style>
|
|
1405
|
-
```
|
|
1406
|
-
|
|
1407
|
-
...will be wrapped to something like:
|
|
1408
|
-
|
|
1409
|
-
```html
|
|
1410
|
-
<style ref="scoped8eff" scoped>
|
|
1411
|
-
@scope from (:has(> style[ref="scoped8eff"])) {
|
|
1412
|
-
h2 { color: red; }
|
|
1413
|
-
}
|
|
1414
|
-
</style>
|
|
1415
|
-
```
|
|
1416
|
-
|
|
1417
|
-
Browser support for `@scope {}` style blocks may be coming soon, but in the meantime, you could try one of the polyfills for `<style scoped>` out there; e.g. [samthor/scoped](https://github.com/samthor/scoped):
|
|
1418
|
-
|
|
1419
|
-
```html
|
|
1420
|
-
<script src="https://unpkg.com/style-scoped/scoped.min.js"></script>
|
|
1421
|
-
```
|
|
1422
|
-
|
|
1423
|
-
+ **Syntax**. The syntax for attribute names and API names across features - e.g. the `def` and `ref` attributes, the `expr` attribute - isn't finalized, and may change on subsequent iterations, albeit with same principle of operation. But the polyfill is designed to be configurable via meta tags, and to honour any such "overrides". Here's an example:
|
|
1424
|
-
|
|
1425
|
-
```html
|
|
1426
|
-
<head>
|
|
1427
|
-
<!-- Configurations come before the polyfil -->
|
|
1428
|
-
<meta name="data-binding" content="attr.expr=expr;">
|
|
1429
|
-
<meta name="namespaced-html" content="attr.id=id;">
|
|
1430
|
-
<meta name="html-imports" content="attr.def=def; attr.ref=ref;">
|
|
1431
|
-
<script src="https://unpkg.com/@webqit/oohtml/dist/main.js"></script>
|
|
1432
|
-
<head>
|
|
1433
|
-
```
|
|
1434
|
-
|
|
1435
|
-
Now, even when the default syntax change, your `def`, `ref`, etc. overrides will keep your implementation intact.
|
|
1436
|
-
|
|
1437
|
-
Additionally, you could employ a global prefix in your implementation:
|
|
1438
|
-
|
|
1439
|
-
```html
|
|
1440
|
-
<meta name="webqit" content="prefix=wq;">
|
|
1441
|
-
```
|
|
1442
|
-
|
|
1443
|
-
...which automatically applies to all `webqit` attributes and APIs (with the exception of the `scoped`, `quantum`, and `data-*` attributes), such that:
|
|
1444
|
-
|
|
1445
|
-
+ `<template def="foo"></template>` now becomes: `<template wq-def="foo"></template>`,
|
|
1446
|
-
+ `<import ref="foo"></import>` now becomes: `<wq-import wq-ref="foo"></wq-import>`,
|
|
1447
|
-
+ `document.import()` now becomes: `document.wqImport()`,
|
|
1448
|
-
+ `document.bind()` now becomes: `document.wqBind()`,
|
|
1449
|
-
+ `document.bindings` now becomes: `document.wqBindings`,
|
|
1450
|
-
+ etc.
|
|
1451
|
-
|
|
1452
|
-
The following is the full syntax table.
|
|
1453
|
-
|
|
1454
|
-
Spec: **data-binding**
|
|
1455
|
-
|
|
1456
|
-
| Config | Default Syntax | Description |
|
|
1457
|
-
| :----- | :------------- | :---------- |
|
|
1458
|
-
| `attr.expr` | `expr` | The "expr" attribute for inline data binding. ([Docs](#inline-data-binding)) |
|
|
1459
|
-
| `attr.itemIndex` | `data-index` | The "item index" attribute for assigning indexes to list items. ([Docs](#inline-data-binding)) |
|
|
1460
|
-
|
|
1461
|
-
Spec: **bindings-api**
|
|
1462
|
-
|
|
1463
|
-
| Config | Default Syntax | Description |
|
|
1464
|
-
| :----- | :------------- | :---------- |
|
|
1465
|
-
| `attr.bindingsreflection` | `bindings` | The attribute for exposing an element's bindings. |
|
|
1466
|
-
| `api.bind` | `bind` | The `document.bind()` and `Element.prototype.bind()` methods. ([Docs](#the-bindings-api)) |
|
|
1467
|
-
| `api.bindings` | `bindings` | The `document.bindings` and `Element.prototype.bindings` object properties. ([Docs](#the-bindings-api)) |
|
|
1468
|
-
|
|
1469
|
-
Spec: **context-api**
|
|
1470
|
-
|
|
1471
|
-
| Config | Default Syntax | Description |
|
|
1472
|
-
| :----- | :------------- | :---------- |
|
|
1473
|
-
| `attr.contextname` | `contextname` | The "context name" attribute on arbitrary elements. ([Docs](#the-context-api)) |
|
|
1474
|
-
| `api.contexts` | `contexts` | The `document.contexts` and `Element.prototype.contexts` object properties. ([Docs](#the-context-api)) |
|
|
1475
|
-
|
|
1476
|
-
Spec: **html-imports**
|
|
1477
|
-
|
|
1478
|
-
| Config | Default Syntax | Description |
|
|
1479
|
-
| :----- | :------------- | :---------- |
|
|
1480
|
-
| `elements.import` | `import` | The tag name for "import" elements. ([Docs](#html-imports)) |
|
|
1481
|
-
| `attr.def` | `def` | The "definition" attribute on the `<template>` elements. ([Docs](#module-definition)) |
|
|
1482
|
-
| `attr.fragmentdef` | *Inherits the value of `attr.def`* | The "definition" attribute on a `<template>`'s contents. ([Docs](#module-definition)) |
|
|
1483
|
-
| `attr.extends` | `extends` | The "extends" attribute for extending definitions. ([Docs](#module-inheritance)) |
|
|
1484
|
-
| `attr.inherits` | `inherits` | The "inherits" attribute for inheriting definitions. ([Docs](#module-inheritance)) |
|
|
1485
|
-
| `attr.ref` | `ref` | The "import ref" attribute on "import" elements. ([Docs](#declarative-module-imports)) |
|
|
1486
|
-
| `attr.importscontext` | `importscontext` | The "importscontext" attribute on arbitrary elements. ([Docs](#imports-contexts)) |
|
|
1487
|
-
| `api.def` | `def` | The readonly string property for accessing an element's "def" value. ([Docs](#module-definition)) |
|
|
1488
|
-
| `api.defs` | `defs` | The readonly object property for accessing a `<template>`'s list of definitions. ([Docs](#module-definition)) |
|
|
1489
|
-
| `api.import` | `import` | The `document.import()` and `Element.prototype.import()` methods. ([Docs](#imperative-module-imports)) |
|
|
1490
|
-
|
|
1491
|
-
Spec: **namespaced-html**
|
|
1492
|
-
|
|
1493
|
-
| Config | Default Syntax | Description |
|
|
1494
|
-
| :----- | :------------- | :---------- |
|
|
1495
|
-
| `attr.namespace` | `namespace` | The "namespace" attribute on arbitrary elements. ([Docs](#namespacing)) |
|
|
1496
|
-
| `attr.id` | `id` | The "id" attribute on arbitrary elements. ([Docs](#namespacing)) |
|
|
1497
|
-
| `api.namespace` | `namespace` | The "namespace" object property on arbitrary elements. ([Docs](#namespacing)) |
|
|
1498
|
-
|
|
1499
|
-
Spec: **scoped-css** (TODO)
|
|
1500
|
-
|
|
1501
|
-
Spec: **scoped-js** (TODO)
|
|
1502
|
-
|
|
1503
|
-
</details>
|
|
1504
|
-
|
|
1505
1500
|
## Examples
|
|
1506
1501
|
|
|
1507
1502
|
Here are a few examples in the wide range of use cases these features cover. While we'll demonstrate the most basic form of these scenarios, it takes roughly the same principles to build an intricate form and a highly interactive UI.
|
package/dist/bindings-api.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(()=>{var Bt=Object.defineProperty;var Gt=(n,t,r)=>t in n?Bt(n,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):n[t]=r;var tt=(n,t,r)=>(Gt(n,typeof t!="symbol"?t+"":t,r),r);function w(n){return!Array.isArray(n)&&typeof n=="object"&&n}function y(n){return Array.isArray(n)}function st(n,t,r=null){return y(t)?n.filter(e=>r?t.filter(i=>r(e,i)).length:t.indexOf(e)!==-1):[]}function F(n,...t){if(globalThis.webqit||(globalThis.webqit={}),globalThis.webqit.refs||Object.defineProperty(globalThis.webqit,"refs",{value:new V}),!arguments.length)return globalThis.webqit.refs;let r=globalThis.webqit.refs.get(n);r||(r=new V,globalThis.webqit.refs.set(n,r));let e,i;for(;e=t.shift();)(i=r)&&!(r=r.get(e))&&(r=new V,i.set(e,r));return r}var V=class extends Map{constructor(...t){super(...t),this.observers=new Set}set(t,r){let e=super.set(t,r);return this.fire("set",t,r,t),e}delete(t){let r=super.delete(t);return this.fire("delete",t),r}has(t){return this.fire("has",t),super.has(t)}get(t){return this.fire("get",t),super.get(t)}keyNames(){return Array.from(super.keys())}observe(t,r,e){let i={type:t,key:r,callback:e};return this.observers.add(i),()=>this.observers.delete(i)}unobserve(t,r,e){if(Array.isArray(t)||Array.isArray(r))throw new Error('The "type" and "key" arguments can only be strings.');for(let i of this.observers)!(et([t,"*"],i.type)&&et([r,"*"],i.key)&&i.callback===e)||this.observers.delete(i)}fire(t,r,...e){for(let i of this.observers)!(et([t,"*"],i.type)&&et([r,"*"],i.key))||i.callback(...e)}},et=(n,t)=>Array.isArray(t)?st(n,t).length:n.includes(t);function N(n){return typeof n=="function"}function B(n){return n===null||n===""}function I(n){return arguments.length&&(n===void 0||typeof n>"u")}function v(n){return Array.isArray(n)||typeof n=="object"&&n||N(n)}function ft(n){return B(n)||I(n)||n===!1||n===0||v(n)&&!Object.keys(n).length}function b(n){return N(n)||n&&{}.toString.call(n)==="[object function]"}function G(n){return n instanceof Number||typeof n=="number"}function C(n){return G(n)||n!==!0&&n!==!1&&n!==null&&n!==""&&!isNaN(n*1)}function W(n){return n instanceof String||typeof n=="string"&&n!==null}function lt(n){return!W(n)&&!I(n.length)}function rt(n,...t){return t.forEach(r=>{n.indexOf(r)<0&&n.push(r)}),n}function ct(e,t){t=t||Object.prototype,t=t&&!y(t)?[t]:t;for(var r=[],e=e;e&&(!t||t.indexOf(e)<0)&&e.name!=="default";)r.push(e),e=e?Object.getPrototypeOf(e):null;return r}function ut(n,t){var r=[];return ct(n,t).forEach(e=>{rt(r,...Object.getOwnPropertyNames(e))}),r}function T(n,t,r=!1,e=!1,i=!1){var o=0,s=n.shift();if((C(s)||s===!0||s===!1)&&(o=s,s=n.shift()),!n.length)throw new Error("_merge() requires two or more array/objects.");return n.forEach((f,a)=>{!v(f)&&!b(f)||(r?ut(f):Object.keys(f)).forEach(u=>{if(!!t(u,s,f,a)){var l=s[u],m=f[u];if((y(l)&&y(m)||w(l)&&w(m))&&(o===!0||o>0))s[u]=y(l)&&y(m)?[]:{},T([C(o)?o-1:o,s[u],l,m],t,r,e,i);else if(y(s)&&y(f))e?s[u]=m:s.push(m);else try{i?Object.defineProperty(s,u,Object.getOwnPropertyDescriptor(f,u)):s[u]=f[u]}catch{}}})}),s}function X(...n){return T(n,(t,r,e)=>!0,!1,!1,!1)}function A(n,t=!0){return y(n)?n:!t&&w(n)?[n]:n!==!1&&n!==0&&ft(n)?[]:lt(n)?Array.prototype.slice.call(n):w(n)?Object.values(n):[n]}function U(n,t,r={},e={}){t=A(t).slice();for(var i=n;!I(i)&&!B(i)&&t.length;){var o=t.shift();if(!(r.get?r.get(i,o):v(i)?o in i:i[o])){e.exists=!1;return}i=r.get?r.get(i,o):i[o]}return e.exists=!0,i}function mt(n,t,r,e={},i={}){let o=(l,m,c)=>i.set?i.set(l,m,c):(C(t[f])&&y(l)?l.push(c):l[m]=c,!0);t=A(t);for(var s=n,f=0;f<t.length;f++)if(f<t.length-1){if(!s||!v(s)&&!b(s))return!1;var a=U(s,t[f],i);if(!v(a)){if(i.buildTree===!1)return!1;a=b(i.buildTree)?i.buildTree(f):C(t[f+1])?[]:{};var u=o(s,t[f],a);if(!u)return!1}s=a}else return o(s,t[f],r)}var z=class{constructor(t,r=!1){Object.defineProperty(this,"window",{value:t}),Object.defineProperty(this,"readCallbacks",{value:new Set}),Object.defineProperty(this,"writeCallbacks",{value:new Set}),Object.defineProperty(this,"_synthesis",{value:0,writable:!0}),!r&&this.window.requestAnimationFrame?this._loop():this._synthesis++}get synthesis(){return this._synthesis}async synthesizeWhile(t){this._synthesis++,this._fulfill();let r=await t();return this._synthesis--,r}_fulfill(){for(let t of this.readCallbacks)t(),this.readCallbacks.delete(t);for(let t of this.writeCallbacks)t(),this.writeCallbacks.delete(t)}_loop(){this.window.requestAnimationFrame(()=>{this._fulfill(),this._loop()})}onread(t,r=!1){if(r)return new Promise(e=>{this.synthesis?e(t()):this.readCallbacks.add(()=>{e(t())})});this.synthesis?Promise.resolve().then(t):this.readCallbacks.add(t)}onwrite(t,r=!1){if(r)return new Promise(e=>{this.synthesis?e(t()):this.writeCallbacks.add(()=>{e(t())})});this.synthesis?Promise.resolve().then(t):this.writeCallbacks.add(t)}cycle(t,r,e){this.onread(()=>{let i=t(e),o=s=>{s!==void 0&&this.onwrite(()=>{let f=r(s,e),a=u=>{u!==void 0&&this.cycle(t,r,u)};f instanceof Promise?f.then(a):a(f)})};i instanceof Promise?i.then(o):o(i)})}};function Ct(n){return(n=n.trim())&&n.startsWith("(")&&n.endsWith(")")}function it(n,t,r,e=!0){r=(Array.isArray(r)?r:[r]).map(s=>(s+"").replace("(",e?"(.//":"(./")).join("|");let i=[],o;try{let s=n.document.evaluate(r,t,null,XPathResult.ANY_TYPE);for(;o=s.iterateNext();)i.push(o)}catch{}return i}function St(n,t,r){r=(Array.isArray(r)?r:[r]).map(e=>(e+"").replace("(","(self::")).join("|");try{return n.document.evaluate(`${r}`,t,null,XPathResult.BOOLEAN_TYPE).booleanValue}catch{}}function Tt(n,t="|"){return[...n].reduce(([r,e,i,o],s)=>!r&&e===0&&(Array.isArray(t)?t:[t]).includes(s)?[r,e,[""].concat(i)]:(!r&&["(","[","{"].includes(s)&&!i[0].endsWith("\\")&&e++,!r&&[")","]","}"].includes(s)&&!i[0].endsWith("\\")&&e--,['"',"'","`"].includes(s)&&!i[0].endsWith("\\")&&(r=r===s?null:r||s),i[0]+=s,[r,e,i]),[null,0,[""]])[2].reverse()}var S=class{constructor(t){this.content=t,this.type=typeof t=="string"?"selector":"instance",this.kind=this.type==="instance"?null:Ct(t)?"xpath":"css",this.kind==="xpath"&&(this.isXpathAttr=Tt(t.trim().slice(1,-1),"@").length>1)}toString(){return this.content}};var $=class{constructor(t,r,e){this.context=t,this.namespace=r,this.window=t.defaultView||t.ownerDocument?.defaultView||e,this.document=this.window.document,this.webqit=this.window.webqit,Object.defineProperty(this,"#",{value:{}})}resolveArgs(t){if(b(t[0])?t=[[],...t]:w(t[0])&&!(t[0]instanceof S)&&t.length===1?t=[[],void 0,t[0]]:w(t[1])&&t.length===2?t=[A(t[0],!1),void 0,t[1]]:t[0]=A(t[0],!1),t[0].filter(r=>typeof r!="string"&&!(r instanceof S)&&!(r instanceof this.window.Node)).length)throw new Error("Argument #2 must be either a string or a Node object, or a list of those.");return t[0]=t[0].map(r=>r instanceof S?r:new S(r)),t}registry(...t){return F("realdom.realtime",this.window,this.namespace,...t)}createSignalGenerator(){return{generate(){return this.lastController?.abort(),this.lastController=new AbortController,{signal:this.lastController.signal}},disconnect(){this.lastController?.abort()}}}forEachMatchingContext(t,r,e){let{window:i}=this,o=Array.isArray(r)?r:[r],s=new Set;for(let[f,a]of this.registry(t))for(let[u,l]of a){let m=o.filter(c=>u.contains(c.target)?f==="subtree"||c.target===u:!1);if(!!m.length){Array.isArray(r)||(m=m[0]);for(let c of l)s.add([c,m,u])}}for(let[f,a,u]of s)e.call(i,f,a,u)}disconnectables(t,...r){let e={disconnect(){r.forEach(i=>i&&b(i.disconnect)&&i.disconnect()||b(i)&&i()||w(i)&&(i.disconnected=!0))}};return t&&t.addEventListener("abort",()=>e.disconnect()),e}};var j=class extends ${constructor(t,...r){super(t,"attr",...r)}get(t,r=void 0,e={}){let i=typeof t=="string"||t instanceof S;[t=[],r=void 0,e={}]=this.resolveArgs(arguments);let{context:o}=this,s=jt(o,t);if(!r)return s;let f=e.lifecycleSignals&&this.createSignalGenerator();if(i)for(let a of s){let u=f?.generate()||{};r(a,u,o)}else{let a=f?.generate()||{};r(s,a,o)}if(e.live){f&&(e={...e,signalGenerator:f});let a=this.observe(i?t[0]:t,r,{newValue:!0,...e});return this.disconnectables(e.signal,a)}}observe(t,r,e={}){let i=typeof t=="string"||t instanceof S;if([t=[],r,e={}]=this.resolveArgs(arguments),["sync","intercept"].includes(e.timing))return this.observeSync(i?t[0]:t,r,e);if(e.timing&&e.timing!=="async")throw new Error(`Timing option "${e.timing}" invalid.`);let{context:o,window:s,webqit:f}=this;e.eventDetails&&!f.realdom.attrInterceptionHooks?.intercepting&&It.call(s,"intercept",()=>{});let a=new s.MutationObserver(c=>{c=Mt(c).map(p=>kt.call(s,p)),Pt.call(s,m,c,o)}),u={attributes:!0,attributeOldValue:e.oldValue,subtree:e.subtree};t.length&&(u.attributeFilter=t.map(c=>c+"")),a.observe(o,u);let l=e.signalGenerator||e.lifecycleSignals&&this.createSignalGenerator(),m={context:o,spec:t,callback:r,params:e,atomics:new Map,originalFilterIsString:i,signalGenerator:l,disconnectable:a};return this.disconnectables(e.signal,a,l)}observeSync(t,r,e={}){let i=typeof t=="string"||t instanceof S;[t,r,e={}]=this.resolveArgs(arguments);let{context:o,window:s}=this;if(e.timing&&!["sync","intercept"].includes(e.timing))throw new Error(`Timing option "${e.timing}" invalid.`);let f=e.timing==="intercept"?"intercept":"sync",a=e.subtree?"subtree":"children";this.registry(f).size||It.call(s,f,_=>{this.forEachMatchingContext(f,_,Pt)});let u={disconnect(){p.delete(m),p.size||c.delete(o)}},l=e.signalGenerator||e.lifecycleSignals&&this.createSignalGenerator(),m={context:o,spec:t,callback:r,params:e,atomics:new Map,originalFilterIsString:i,signalGenerator:l,disconnectable:u},c=this.registry(f,a);c.has(o)||c.set(o,new Set);let p=c.get(o);return p.add(m),this.disconnectables(e.signal,u,l)}};function Mt(n){return n.reduce((t,r,e)=>t[e-1]?.attributeName===r.attributeName?t:t.concat(r),[])}function Pt(n,t){let{context:r,spec:e,callback:i,params:o,atomics:s,originalFilterIsString:f,signalGenerator:a}=n,u=e.map(c=>c+"");if(o.atomic&&!s.size?t=jt(r,e,t):o.timing!=="async"&&e.length&&(t=t.filter(c=>u.includes(c.name))),!t.length)return;o.newValue===null&&o.oldValue===null&&o.eventDetails||(t=t.map(c=>{let p;return o.eventDetails||({event:p,...c}=c),!o.oldValue&&"oldValue"in c&&({oldValue:p,...c}=c),!o.newValue&&"value"in c?{value:p,...c}=c:o.newValue&&typeof c.value>"u"&&(c={...c,value:c.target.getAttribute(c.name)}),c})),o.atomic&&(t.forEach(c=>s.set(c.name,c)),t=Array.from(s.entries()).map(([,c])=>c));let l=f?t[0]:t,m=a?.generate()||{};i(l,m,r)}function jt(n,t,r=[]){let e={event:null,type:"attribute"};return t.length?t.map(o=>(o=o+"",r.find(s=>s.name===o)||{target:n,name:o,value:n.getAttribute(o),...e})):Array.from(n.attributes).map(o=>r.find(s=>s.name===o.nodeName)||{target:n,name:o.nodeName,value:o.nodeValue,...e})}function kt({target:n,attributeName:t,value:r,oldValue:e}){let s=(this.webqit.realdom.attrInterceptionRecords?.get(n)||{})[t]?.[0]||"mutation";return{target:n,name:t,value:r,oldValue:e,type:"observation",event:s}}function It(n,t){let r=this,{webqit:e,document:i,Element:o}=r;e.realdom.attrInterceptionHooks||Object.defineProperty(e.realdom,"attrInterceptionHooks",{value:new Map}),e.realdom.attrInterceptionHooks.has(n)||e.realdom.attrInterceptionHooks.set(n,new Set),e.realdom.attrInterceptionHooks.get(n).add(t);let s=()=>e.realdom.attrInterceptionHooks.get(n).delete(t);if(e.realdom.attrInterceptionHooks?.intercepting)return s;console.warn("Attr mutation APIs are now being intercepted."),e.realdom.attrInterceptionHooks.intercepting=!0,Object.defineProperty(e.realdom,"attrInterceptionRecords",{value:new Map});let f=(l,m)=>{e.realdom.attrInterceptionRecords.has(l.target)||e.realdom.attrInterceptionRecords.set(l.target,{});let c=e.realdom.attrInterceptionRecords.get(l.target);c[l.name]=c[l.name]||[],c[l.name].unshift(l.event),e.realdom.attrInterceptionHooks.get("intercept")?.forEach(_=>_([l]));let p=m();return e.realdom.attrInterceptionHooks.get("sync")?.forEach(_=>_([l])),p};new r.MutationObserver(l=>{l=l.filter(m=>!(r.webqit.realdom.attrInterceptionRecords?.get(m.target)||{})[m.attributeName]?.shift()),l=Mt(l).map(m=>kt.call(r,m)),l.length&&(e.realdom.attrInterceptionHooks.get("intercept")?.forEach(m=>m(l)),e.realdom.attrInterceptionHooks.get("sync")?.forEach(m=>m(l)))}).observe(i,{attributes:!0,subtree:!0,attributeOldValue:!0});let u=Object.create(null);return["setAttribute","removeAttribute","toggleAttribute"].forEach(l=>{u[l]=o.prototype[l],o.prototype[l]=function(...m){let c,p=this.getAttribute(m[0]);["setAttribute","toggleAttribute"].includes(l)&&(c=m[1]),l==="toggleAttribute"&&c===void 0&&(c=p===null);let _={target:this,name:m[0],value:c,oldValue:p,type:"interception",event:[this,l]};return f(_,()=>u[l].call(this,...m))}}),s}var J=class extends ${constructor(t,...r){super(t,"tree",...r)}attr(t,r=void 0,e={}){let{context:i,window:o}=this;return new j(i,o).get(...arguments)}query(t,r=void 0,e={}){[t,r=void 0,e={}]=this.resolveArgs(arguments);let{context:i}=this,o=new Map,s=u=>(o.has(u)||o.set(u,{target:u,entrants:[],exits:[],type:"query",event:null}),o.get(u));if(!e.generation||e.generation==="entrants"){if(!t.length)[...i.children].forEach(u=>s(i).entrants.push(u));else if(t.every(u=>u.type==="selector")){let[u,l]=t.reduce(([c,p],_)=>_.kind==="xpath"?[c,p.concat(_)]:[c.concat(_),p],[[],[]]),m=[];e.subtree?(u.length&&m.push(...i.querySelectorAll(u.join(","))),l.length&&m.push(...it(this.window,i,l))):(u.length&&m.push(...[...i.children].filter(c=>c.matches(u))),l.length&&m.push(...it(this.window,i,l,!1))),m.forEach(c=>s(c.parentNode||i).entrants.push(c))}}if(!r)return o;let f={disconnected:!1},a=r&&e.lifecycleSignals&&this.createSignalGenerator();for(let[,u]of o){if(f.disconnected)break;let l=a?.generate()||{};r(u,l,i)}if(e.live){a&&(e={...e,signalGenerator:a});let u=this.observe(t,r,e);return this.disconnectables(e.signal,f,u)}return this.disconnectables(e.signal,f,a)}children(t,r=void 0,e={}){return[t,r=void 0,e={}]=this.resolveArgs(arguments),this.query(t,r,{...e,subtree:!1})}subtree(t,r=void 0,e={}){return[t,r=void 0,e={}]=this.resolveArgs(arguments),this.query(t,r,{...e,subtree:!0})}observe(t,r,e={}){if([t,r,e={}]=this.resolveArgs(arguments),["sync","intercept"].includes(e.timing))return this.observeSync(t,r,e);if(e.timing&&e.timing!=="async")throw new Error(`Timing option "${e.timing}" invalid.`);let{context:i,window:o,webqit:s,document:f}=this;e.eventDetails&&(s.realdom.domInterceptionRecordsAlwaysOn=!0),(f.readyState==="loading"||s.realdom.domInterceptionRecordsAlwaysOn)&&!s.realdom.domInterceptionHooks?.intercepting&&$t.call(o,"sync",()=>{});let a=new o.MutationObserver(m=>m.forEach(c=>{pt.call(o,l,Ht.call(o,c),i)}));a.observe(i,{childList:!0,subtree:e.subtree});let u=e.signalGenerator||e.lifecycleSignals&&this.createSignalGenerator(),l={context:i,spec:t,callback:r,params:e,signalGenerator:u,disconnectable:a};if(e.staticSensitivity){let m=Lt.call(o,l);return this.disconnectables(e.signal,a,u,m)}return this.disconnectables(e.signal,a,u)}observeSync(t,r,e={}){[t,r,e={}]=this.resolveArgs(arguments);let{context:i,window:o}=this;if(e.timing&&!["sync","intercept"].includes(e.timing))throw new Error(`Timing option "${e.timing}" invalid.`);let s=e.timing==="intercept"?"intercept":"sync",f=e.subtree?"subtree":"children";this.registry(s).size||$t.call(o,s,_=>{this.forEachMatchingContext(s,_,pt)});let a=new o.MutationObserver(_=>_.forEach(d=>{Array.isArray((d=Ht.call(o,d)).event)||pt.call(o,m,d,i)}));a.observe(i,{childList:!0,subtree:e.subtree});let u={disconnect(){a.disconnect(),p.delete(m),p.size||c.delete(i)}},l=e.signalGenerator||e.lifecycleSignals&&this.createSignalGenerator(),m={context:i,spec:t,callback:r,params:e,signalGenerator:l,disconnectable:u},c=this.registry(s,f);c.has(i)||c.set(i,new Set);let p=c.get(i);if(p.add(m),e.staticSensitivity){let _=Lt.call(o,m);return this.disconnectables(e.signal,u,l,_)}return this.disconnectables(e.signal,u,l)}};function Lt(n){let t=this,{context:r,spec:e,callback:i,params:o,signalGenerator:s}=n,f=e.filter(p=>p.kind==="css"),a=p=>p.match(/\.([\w-]+)/g)?.length?["class"]:[],u=p=>p.match(/#([\w-]+)/g)?.length?["id"]:[],l=p=>[...p.matchAll(/\[([^\=\]]+)(\=[^\]]+)?\]/g)].map(_=>_[1]).concat(a(p)).concat(u(p));if(!(n.$attrs=Array.from(new Set(f.filter(p=>(p+"").includes("[")).reduce((p,_)=>p.concat(l(_+"")),[])))).length)return;let m=new Set,c=new Set;return m.push=p=>(c.delete(p),m.add(p)),c.push=p=>(m.delete(p),c.add(p)),n.$deliveryCache={entrants:m,exits:c},new j(r,t).observe(n.$attrs,p=>{let _=new Map,d=h=>(_.has(h)||_.set(h,{target:h,entrants:[],exits:[],type:"static",event:null}),_.get(h)),O=new WeakMap,g=h=>(O.has(h)||O.set(h,f.some(x=>h.matches(x+""))),O.get(h));for(let h of p)["entrants","exits"].forEach(x=>{o.generation&&x!==o.generation||n.$deliveryCache[x].has(h.target)||(x==="entrants"?!g(h.target):g(h.target))||(n.$deliveryCache[x].push(h.target),d(h.target)[x].push(h.target),d(h.target).event=h.event)});for(let[,h]of _){let x=s?.generate()||{};i(h,x,r)}},{subtree:o.subtree,timing:o.timing,eventDetails:o.eventDetails})}function pt(n,t){let{context:r,spec:e,callback:i,params:o,signalGenerator:s,$deliveryCache:f}=n,a={...t,entrants:[],exits:[]};if(o.eventDetails||delete a.event,["entrants","exits"].forEach(l=>{if(!(o.generation&&l!==o.generation)&&(e.length?a[l]=se.call(this,e,t[l],t.event!=="parse"):a[l]=[...t[l]],!!f))for(let m of a[l])f[l].push(m)}),!a.entrants.length&&!a.exits.length)return;let u=s?.generate()||{};i(a,u,r)}function se(n,t,r){t=Array.isArray(t)?t:[...t];let e=(i,o)=>{if(o.type==="selector"){let s=o.isXpathAttr?[]:i.filter(f=>o.kind==="xpath"?St(this,f,o+""):f.matches&&f.matches(o+""));if((r||o.isXpathAttr)&&(s=i.reduce((f,a)=>o.kind==="xpath"?[...f,...it(this,a,o,r)]:a.querySelectorAll?[...f,...a.querySelectorAll(o+"")]:f,s)),s.length)return s}else if(i.includes(o.content)||r&&i.some(s=>s.contains(o.content)))return[o.content]};return t.$$searchCache||(t.$$searchCache=new Map),n.reduce((i,o)=>{let s;return t.$$searchCache.has(o.content)?s=t.$$searchCache.get(o.content):(s=e(t,o)||[],o.type==="instance"&&t.$$searchCache.set(o.content,s)),i.concat(s)},[])}function Ht({target:n,addedNodes:t,removedNodes:r}){let e=this,i;return i=A(t).reduce((o,s)=>o||e.webqit.realdom.domInterceptionRecords?.get(s),null),i=A(r).reduce((o,s)=>o||e.webqit.realdom.domInterceptionRecords?.get(s),i),i=i||e.document.readyState==="loading"&&"parse"||"mutation",{target:n,entrants:t,exits:r,type:"observation",event:i}}function $t(n,t){let r=this,{webqit:e,document:i,Node:o,CharacterData:s,Element:f,HTMLElement:a,HTMLTemplateElement:u,DocumentFragment:l}=r;e.realdom.domInterceptionHooks||Object.defineProperty(e.realdom,"domInterceptionHooks",{value:new Map}),e.realdom.domInterceptionHooks.has(n)||e.realdom.domInterceptionHooks.set(n,new Set),e.realdom.domInterceptionHooks.get(n).add(t);let m=()=>e.realdom.domInterceptionHooks.get(n).delete(t);if(e.realdom.domInterceptionHooks?.intercepting)return m;console.warn("DOM mutation APIs are now being intercepted."),e.realdom.domInterceptionHooks.intercepting=!0,Object.defineProperty(e.realdom,"domInterceptionRecords",{value:new Map});let c=(d,O)=>{d.entrants.concat(d.exits).forEach(h=>{clearTimeout(e.realdom.domInterceptionRecords.get(h)?.timeout),e.realdom.domInterceptionRecords.set(h,d.event);let x=setTimeout(()=>{e.realdom.domInterceptionRecords.delete(h)},0);Object.defineProperty(d.event,"timeout",{value:x,configurable:!0})}),e.realdom.domInterceptionHooks.get("intercept")?.forEach(h=>h(d));let g=O();return e.realdom.domInterceptionHooks.get("sync")?.forEach(h=>h(d)),g},p={characterData:Object.create(null),other:Object.create(null)};["insertBefore","insertAdjacentElement","insertAdjacentHTML","setHTML","replaceChildren","replaceWith","remove","replaceChild","removeChild","before","after","append","prepend","appendChild"].forEach(d=>{function O(...g){let h=this instanceof s?p.characterData:p.other,x=()=>h[d].call(this,...g);if(!(this instanceof s||this instanceof f||this instanceof l))return x();let P=[],E=[],R=this;["insertBefore"].includes(d)?E=[g[0]]:["insertAdjacentElement","insertAdjacentHTML"].includes(d)?(E=[g[1]],["beforebegin","afterend"].includes(g[0])&&(R=this.parentNode)):["setHTML","replaceChildren"].includes(d)?(P=[...this.childNodes],E=d==="replaceChildren"?[...g]:[g[0]]):["replaceWith","remove"].includes(d)?(P=[this],E=d==="replaceWith"?[...g]:[],R=this.parentNode):["replaceChild"].includes(d)?(P=[g[1]],E=[g[0]]):["removeChild"].includes(d)?P=[...g]:(E=[...g],["before","after"].includes(d)&&(R=this.parentNode));let H=d;if(["insertAdjacentHTML","setHTML"].includes(d)){let bt=this.nodeName;if(d==="insertAdjacentHTML"&&["beforebegin","afterend"].includes(g[0])){if(!this.parentNode)return h[d].call(this,...g);bt=this.parentNode.nodeName}let K=i.createElement(bt);h.setHTML.call(K,E[0],d==="setHTML"?g[1]:{}),E=[...K.childNodes],d==="insertAdjacentHTML"?(H="insertAdjacentElement",g[1]=new l,g[1].______isTemp=!0,g[1].append(...K.childNodes)):(H="replaceChildren",g=[...K.childNodes])}return c({target:R,entrants:E,exits:P,type:"interception",event:[this,d]},()=>h[H].call(this,...g))}["insertBefore","replaceChild","removeChild","appendChild"].includes(d)?(p.other[d]=o.prototype[d],o.prototype[d]=O):(["after","before","remove","replaceWith"].includes(d)&&(p.characterData[d]=s.prototype[d],s.prototype[d]=O),f.prototype[d]&&(p.other[d]=f.prototype[d],f.prototype[d]=O))});let _=Object.create(null);return["outerHTML","outerText","innerHTML","innerText","textContent","nodeValue"].forEach(d=>{let O=["textContent","nodeValue"].includes(d)?o:["outerText","innerText"].includes(d)?a:f;_[d]=Object.getOwnPropertyDescriptor(O.prototype,d),Object.defineProperty(O.prototype,d,{..._[d],set:function(g){let h=()=>_[d].set.call(this,g);if(!(this instanceof f))return h();let x=[],P=[],E=this;if(["outerHTML","outerText"].includes(d)?(x=[this],E=this.parentNode):x=[...this.childNodes],["outerHTML","innerHTML"].includes(d)){let H=this.nodeName;if(d==="outerHTML"){if(!this.parentNode)return h();H=this.parentNode.nodeName}let D=i.createElement(H==="TEMPLATE"?"div":H);_[d].set.call(D,g),P=this instanceof u?[]:[...D.childNodes],d==="outerHTML"?(g=new l,g.______isTemp=!0,g.append(...D.childNodes),h=()=>f.prototype.replaceWith.call(this,g)):this instanceof u?h=()=>this.content.replaceChildren(...D.childNodes):h=()=>f.prototype.replaceChildren.call(this,...D.childNodes)}return c({target:E,entrants:P,exits:x,type:"interception",event:[this,d]},h)}})}),["append","prepend","replaceChildren"].forEach(d=>{[i,l.prototype].forEach(O=>{let g=O[d];O[d]=function(...h){if(this.______isTemp)return g.call(this,...h);let x=d==="replaceChildren"?[...this.childNodes]:[];return c({target:this,entrants:h,exits:x,type:"interception",event:[this,d]},()=>g.call(this,...h))}})}),m}function Dt(){fe.call(this),le.call(this),ce.call(this)}function fe(){let n=this;n.CSS||(n.CSS={}),n.CSS.escape||(n.CSS.escape=t=>t.replace(/([\:@\~\$\&])/g,"\\$1"))}function le(){let n=this;"isConnected"in n.Node.prototype||Object.defineProperty(n.Node.prototype,"isConnected",{get:function(){return!this.ownerDocument||!(this.ownerDocument.compareDocumentPosition(this)&this.DOCUMENT_POSITION_DISCONNECTED)}})}function ce(){let n=this;n.Element.prototype.matches||(n.Element.prototype.matches=n.Element.prototype.matchesSelector||n.Element.prototype.mozMatchesSelector||n.Element.prototype.msMatchesSelector||n.Element.prototype.oMatchesSelector||n.Element.prototype.webkitMatchesSelector||function(t){for(var r=(this.document||this.ownerDocument).querySelectorAll(t),e=r.length;--e>=0&&r.item(e)!==this;);return e>-1})}function Ft(){let n=this;if(n.webqit||(n.webqit={}),n.webqit.realdom)return n.webqit.realdom;n.webqit.realdom={},Dt.call(n),n.webqit.realdom.meta=(...r)=>ue.call(n,...r),n.webqit.realdom.ready=(...r)=>ht.call(n,...r),n.webqit.realdom.realtime=(r,e="dom")=>{if(e==="dom")return new J(r,n);if(e==="attr")return new j(r,n)};let t=new z(n);return n.webqit.realdom.schedule=(r,...e)=>t[`on${r}`](...e),n.webqit.realdom.synthesizeWhile=(...r)=>t.synthesizeWhile(...r),n.webqit.realdom}function ht(...n){let t="interactive",r;W(n[0])?(t=n[0],b(n[1])&&(r=n[1])):b(n[0])&&(r=n[0]);let e={interactive:["interactive","complete"],complete:["complete"]};if(!e[t])throw new Error(`Invalid ready-state timing: ${t}.`);let i=this;if(!r)return i.webqit.realdom.readyStatePromises||(i.webqit.realdom.readyStatePromises={interactive:new Promise(o=>ht.call(this,"interactive",o)),complete:new Promise(o=>ht.call(this,"complete",o))}),i.webqit.realdom.readyStatePromises[t];if(e[t].includes(i.document.readyState))return r(i);i.webqit.realdom.readyStateCallbacks||(i.webqit.realdom.readyStateCallbacks={interactive:[],complete:[]},i.document.addEventListener("readystatechange",()=>{let o=i.document.readyState;for(let s of i.webqit.realdom.readyStateCallbacks[o].splice(0))s(i)},!1)),i.webqit.realdom.readyStateCallbacks[t].push(r)}function ue(n){let t=this,r={},e;return(e=t.document.querySelector(`meta[name="${n}"]`))&&(r=(e.content||"").split(";").filter(i=>i).reduce((i,o)=>{let s=o.split("=").map(f=>f.trim());return mt(i,s[0].split("."),s[1]==="true"?!0:s[1]==="false"?!1:C(s[1])?parseInt(s[1]):s[1]),i},{})),{get name(){return n},get content(){return e.content},json(){return JSON.parse(JSON.stringify(r))}}}function ot(n,t){return typeof n!="string"?n:n.replace(/\w\S*/g,function(r){return r.charAt(0).toUpperCase()+(typeof t!==void 0&&t?r.substr(1).toLowerCase():r.substr(1))})}var k=(...n)=>F("oohtml",...n),q={};function Wt(n,t,r){let e=this,i=Ft.call(e);q.window=e,e.webqitConfig||(e.webqitConfig=i.meta("webqit").json()),e.webqit||(e.webqit={}),e.webqit.oohtml||(e.webqit.oohtml={}),e.webqit.oohtml.configs||(e.webqit.oohtml.configs={});let o=n.toUpperCase().replace("-","_");if(!e.webqit.oohtml.configs[o]){e.webqit.oohtml.configs[o]={};let s=e.webqit.oohtml.configs[o];X(2,s,r,t,i.meta(n).json()),e.webqitConfig.prefix&&Object.keys(s).forEach(f=>{Object.keys(s[f]).forEach(a=>{f==="api"&&typeof s[f][a]=="string"?s[f][a]=`${e.webqitConfig.prefix}${ot(s[f][a])}`:["attr","elements"].includes(f)&&s[f][a]?.startsWith("data-")===!1&&(s[f][a]=`${e.webqitConfig.prefix}-${s[f][a]}`)})})}return{config:e.webqit.oohtml.configs[o],realdom:i,window:e}}function Rt(){let{window:n}=q,{webqit:t}=n;if(t.DOMContextRequestEvent)return t.DOMContextRequestEvent;class r extends n.Event{constructor(...i){let o=i.pop();if(typeof o!="function")throw new Error("Callback must be provided.");let s=i.pop();if(!s?.kind)throw new Error('"options.kind" must be specified.');let f=["contextrequest","contextclaim"],a=i.pop()||f[0];if(!f.includes(a))throw new Error(`Invalid event type. Must be one of: ${f.join(",")}`);let{kind:u,detail:l,targetContext:m,live:c,signal:p,diff:_,...d}=s;super(a,{...d,bubbles:d.bubbles!==!1}),Object.defineProperty(this,"callback",{get:()=>o}),Object.defineProperty(this,"kind",{get:()=>u}),Object.defineProperty(this,"targetContext",{get:()=>m}),Object.defineProperty(this,"detail",{get:()=>l}),Object.defineProperty(this,"live",{get:()=>c}),Object.defineProperty(this,"signal",{get:()=>p}),Object.defineProperty(this,"diff",{get:()=>_}),Object.defineProperty(this,"options",{get:()=>d})}respondWith(i){if(this.diff){if("_prevValue"in this&&this._prevValue===i)return;Object.defineProperty(this,"_prevValue",{value:i,configurable:!0})}return this.callback(i)}}return t.DOMContextRequestEvent=r,r}var Y=class extends AbortController{constructor(t){super(),t(r=>{let{window:{webqit:{Observer:e}}}=q;e.defineProperty(this,"value",{value:r,configurable:!0,enumerable:!0})},this)}};var Q=class extends Error{};var Z=class{static instance(t){return k(t).get("contexts::instance")||new this(t)}constructor(t){k(t).get("contexts::instance")?.dispose(),k(t).set("contexts::instance",this);let r={host:t,contexts:new Set};Object.defineProperty(this,"#",{get:()=>r})}get[Symbol.iterator](){return this["#"].contexts[Symbol.iterator]}get length(){return this["#"].contexts.size}find(...t){return[...this["#"].contexts].find(r=>typeof t[0]=="function"?t[0](r):r.constructor.kind===t[0]&&(t.length===1||r.detail===t[1]))}attach(t){if(!(t instanceof L))throw new TypeError("Context is not a valid DOMContext instance.");if(this.find(t.constructor.kind,t.detail))throw new Q(`Context of same kind "${t.constructor.kind}"${t.detail?` and detail "${t.detail}"`:""} already exists.`);this["#"].contexts.add(t),t.initialize(this["#"].host)}detach(t){t.dispose(this["#"].host),this["#"].contexts.delete(t)}request(...t){return new Y((r,e)=>{typeof t[t.length-1]!="function"&&(t[t.length-1]?t.push(r):t[t.length-1]=r);let i;(i=t.find(s=>typeof s=="object"&&s))&&i.live&&(i.signal&&i.signal.addEventListener("abort",()=>e.abort()),t[t.indexOf(i)]={...i,signal:e.signal});let o=new(Rt())(...t);this["#"].host.dispatchEvent(o)})}};var gt=class{static createRequest(){return{kind:this.kind}}constructor(t=null){Object.defineProperty(this,"detail",{get:()=>t}),Object.defineProperty(this,"subscriptions",{value:new Set})}get configs(){let{window:{webqit:{oohtml:{configs:t}}}}=q;return t}get name(){return this.host===q.window.document?1/0:this.host.getAttribute(this.configs.CONTEXT_API.attr.contextname)}subscribed(t){}handle(t){}unsubscribed(t){}matchEvent(t){return t.kind===this.constructor.kind&&(!t.targetContext||t.targetContext===this.name)}handleEvent(t){if(!(this.disposed||typeof t.respondWith!="function")){if(t.type==="contextclaim"){if(t.target===this.host||!(t.detail instanceof gt))return;let r=new Set;return this.subscriptions.forEach(e=>{!t.target.contains(e.target)||!t.detail.matchEvent(e)||(t.stopPropagation(),this.subscriptions.delete(e),r.add(e))}),t.respondWith(r)}if(t.type==="contextrequest")return this.matchEvent(t)?(t.live&&(this.subscriptions.add(t),this.subscribed(t),t.signal?.addEventListener("abort",()=>{this.subscriptions.delete(t),this.unsubscribed(t)})),t.stopPropagation(),this.handle(t)):void 0}}initialize(t){this.host=t,this.disposed=!1,t.addEventListener("contextrequest",this),t.addEventListener("contextclaim",this);let{value:r}=Z.instance(t).request("contextclaim",{kind:this.constructor.kind,detail:this});return r?.forEach(e=>{this.subscriptions.add(e),this.subscribed(e),this.handle(e)}),this}dispose(t){return this.disposed=!0,t.removeEventListener("contextrequest",this),t.removeEventListener("contextclaim",this),this.subscriptions.forEach(r=>{this.subscriptions.delete(r),this.unsubscribed(r);let{target:e}=r;e.dispatchEvent(r)}),this}},L=gt;tt(L,"kind");var M=class extends L{static createRequest(t=null){let r=super.createRequest();if(t?.startsWith("@")){let[e,...i]=i.slice(1).split(".").map(o=>o.trim());r.targetContext=e,r.detail=i.join(".")}else r.detail=t;return r}get bindingsObj(){return this.host[this.configs.BINDINGS_API.api.bindings]}matchEvent(t){return super.matchEvent(t)&&(!t.detail||!this.detail||(Array.isArray(t.detail)?t.detail[0]===this.detail:t.detail===this.detail))}handle(t){if(t._controller?.abort(),!(t.detail+"").trim())return t.respondWith(this.bindingsObj);let{window:{webqit:{Observer:r}}}=q;t._controller=r.reduce(this.bindingsObj,Array.isArray(t.detail)?t.detail:[t.detail],r.get,e=>{this.disposed||t.respondWith(e.value)},{live:t.live,signal:t.signal,descripted:!0})}unsubscribed(t){t._controller?.abort()}};tt(M,"kind","bindings");function _t(n={}){let{config:t,window:r}=Wt.call(this,"bindings-api",n,{attr:{bindingsreflection:"bindings"},api:{bind:"bind",bindings:"bindings"}});r.webqit.DOMBindingsContext=M,de.call(r,t)}function yt(n,t){let r=this,{webqit:{Observer:e,oohtml:{configs:{CONTEXT_API:i}}}}=r;if(!k(t).has("bindings")){let o=Object.create(null);k(t).set("bindings",o),e.observe(o,s=>{let f=Object.keys(o),a=t===r.document?r.document.documentElement:t,u=n.attr.bindingsreflection;f.length&&u?a.setAttribute(n.attr.bindingsreflection,f.join(" ")):u&&a.toggleAttribute(n.attr.bindingsreflection,!1);let l=t[i.api.contexts];for(let m of s)if(m.type==="delete"){let c=l.find(M.kind,m.key);c&&l.detach(c)}else l.find(M.kind,m.key)||l.attach(new M(m.key))})}return k(t).get("bindings")}function Vt(n,t,r,{merge:e,diff:i,namespace:o}={}){let s=this,{webqit:{Observer:f}}=s,a=yt.call(this,n,t),u={diff:i,namespace:o},l=e?[]:f.ownKeys(a,u).filter(m=>!(m in r));return f.batch(a,()=>(l.length&&f.deleteProperties(a,l,u),f.set(a,r,u)),u)}function de(n){let t=this,{webqit:{Observer:r}}=t;if(n.api.bind in t.document)throw new Error(`document already has a "${n.api.bind}" property!`);if(n.api.bindings in t.document)throw new Error(`document already has a "${n.api.bindings}" property!`);if(n.api.bind in t.Element.prototype)throw new Error(`The "Element" class already has a "${n.api.bind}" property!`);if(n.api.bindings in t.Element.prototype)throw new Error(`The "Element" class already has a "${n.api.bindings}" property!`);Object.defineProperty(t.document,n.api.bind,{value:function(e,i={}){return Vt.call(t,n,t.document,e,i)}}),Object.defineProperty(t.document,n.api.bindings,{get:function(){return r.proxy(yt.call(t,n,t.document))}}),Object.defineProperty(t.Element.prototype,n.api.bind,{value:function(e,i={}){return Vt.call(t,n,this,e,i)}}),Object.defineProperty(t.Element.prototype,n.api.bindings,{get:function(){return r.proxy(yt.call(t,n,this))}})}_t.call(window);})();
|
|
1
|
+
(()=>{var Bt=Object.defineProperty;var Gt=(n,t,r)=>t in n?Bt(n,t,{enumerable:!0,configurable:!0,writable:!0,value:r}):n[t]=r;var tt=(n,t,r)=>(Gt(n,typeof t!="symbol"?t+"":t,r),r);function w(n){return!Array.isArray(n)&&typeof n=="object"&&n}function y(n){return Array.isArray(n)}function st(n,t,r=null){return y(t)?n.filter(e=>r?t.filter(i=>r(e,i)).length:t.indexOf(e)!==-1):[]}function F(n,...t){if(globalThis.webqit||(globalThis.webqit={}),globalThis.webqit.refs||Object.defineProperty(globalThis.webqit,"refs",{value:new V}),!arguments.length)return globalThis.webqit.refs;let r=globalThis.webqit.refs.get(n);r||(r=new V,globalThis.webqit.refs.set(n,r));let e,i;for(;e=t.shift();)(i=r)&&!(r=r.get(e))&&(r=new V,i.set(e,r));return r}var V=class extends Map{constructor(...t){super(...t),this.observers=new Set}set(t,r){let e=super.set(t,r);return this.fire("set",t,r,t),e}delete(t){let r=super.delete(t);return this.fire("delete",t),r}has(t){return this.fire("has",t),super.has(t)}get(t){return this.fire("get",t),super.get(t)}keyNames(){return Array.from(super.keys())}observe(t,r,e){let i={type:t,key:r,callback:e};return this.observers.add(i),()=>this.observers.delete(i)}unobserve(t,r,e){if(Array.isArray(t)||Array.isArray(r))throw new Error('The "type" and "key" arguments can only be strings.');for(let i of this.observers)!(et([t,"*"],i.type)&&et([r,"*"],i.key)&&i.callback===e)||this.observers.delete(i)}fire(t,r,...e){for(let i of this.observers)!(et([t,"*"],i.type)&&et([r,"*"],i.key))||i.callback(...e)}},et=(n,t)=>Array.isArray(t)?st(n,t).length:n.includes(t);function W(n){return typeof n=="function"}function B(n){return n===null||n===""}function I(n){return arguments.length&&(n===void 0||typeof n>"u")}function v(n){return Array.isArray(n)||typeof n=="object"&&n||W(n)}function ft(n){return B(n)||I(n)||n===!1||n===0||v(n)&&!Object.keys(n).length}function b(n){return W(n)||n&&{}.toString.call(n)==="[object function]"}function G(n){return n instanceof Number||typeof n=="number"}function C(n){return G(n)||n!==!0&&n!==!1&&n!==null&&n!==""&&!isNaN(n*1)}function N(n){return n instanceof String||typeof n=="string"&&n!==null}function lt(n){return!N(n)&&!I(n.length)}function rt(n,...t){return t.forEach(r=>{n.indexOf(r)<0&&n.push(r)}),n}function ct(e,t){t=t||Object.prototype,t=t&&!y(t)?[t]:t;for(var r=[],e=e;e&&(!t||t.indexOf(e)<0)&&e.name!=="default";)r.push(e),e=e?Object.getPrototypeOf(e):null;return r}function ut(n,t){var r=[];return ct(n,t).forEach(e=>{rt(r,...Object.getOwnPropertyNames(e))}),r}function T(n,t,r=!1,e=!1,i=!1){var o=0,s=n.shift();if((C(s)||s===!0||s===!1)&&(o=s,s=n.shift()),!n.length)throw new Error("_merge() requires two or more array/objects.");return n.forEach((f,a)=>{!v(f)&&!b(f)||(r?ut(f):Object.keys(f)).forEach(u=>{if(!!t(u,s,f,a)){var l=s[u],m=f[u];if((y(l)&&y(m)||w(l)&&w(m))&&(o===!0||o>0))s[u]=y(l)&&y(m)?[]:{},T([C(o)?o-1:o,s[u],l,m],t,r,e,i);else if(y(s)&&y(f))e?s[u]=m:s.push(m);else try{i?Object.defineProperty(s,u,Object.getOwnPropertyDescriptor(f,u)):s[u]=f[u]}catch{}}})}),s}function X(...n){return T(n,(t,r,e)=>!0,!1,!1,!1)}function A(n,t=!0){return y(n)?n:!t&&w(n)?[n]:n!==!1&&n!==0&&ft(n)?[]:lt(n)?Array.prototype.slice.call(n):w(n)?Object.values(n):[n]}function U(n,t,r={},e={}){t=A(t).slice();for(var i=n;!I(i)&&!B(i)&&t.length;){var o=t.shift();if(!(r.get?r.get(i,o):v(i)?o in i:i[o])){e.exists=!1;return}i=r.get?r.get(i,o):i[o]}return e.exists=!0,i}function mt(n,t,r,e={},i={}){let o=(l,m,c)=>i.set?i.set(l,m,c):(C(t[f])&&y(l)?l.push(c):l[m]=c,!0);t=A(t);for(var s=n,f=0;f<t.length;f++)if(f<t.length-1){if(!s||!v(s)&&!b(s))return!1;var a=U(s,t[f],i);if(!v(a)){if(i.buildTree===!1)return!1;a=b(i.buildTree)?i.buildTree(f):C(t[f+1])?[]:{};var u=o(s,t[f],a);if(!u)return!1}s=a}else return o(s,t[f],r)}var z=class{constructor(t,r=!1){Object.defineProperty(this,"window",{value:t}),Object.defineProperty(this,"readCallbacks",{value:new Set}),Object.defineProperty(this,"writeCallbacks",{value:new Set}),Object.defineProperty(this,"_synthesis",{value:0,writable:!0}),!r&&this.window.requestAnimationFrame?this._loop():this._synthesis++}get synthesis(){return this._synthesis}async synthesizeWhile(t){this._synthesis++,this._fulfill();let r=await t();return this._synthesis--,r}_fulfill(){for(let t of this.readCallbacks)t(),this.readCallbacks.delete(t);for(let t of this.writeCallbacks)t(),this.writeCallbacks.delete(t)}_loop(){this.window.requestAnimationFrame(()=>{this._fulfill(),this._loop()})}onread(t,r=!1){if(r)return new Promise(e=>{this.synthesis?e(t()):this.readCallbacks.add(()=>{e(t())})});this.synthesis?Promise.resolve().then(t):this.readCallbacks.add(t)}onwrite(t,r=!1){if(r)return new Promise(e=>{this.synthesis?e(t()):this.writeCallbacks.add(()=>{e(t())})});this.synthesis?Promise.resolve().then(t):this.writeCallbacks.add(t)}cycle(t,r,e){this.onread(()=>{let i=t(e),o=s=>{s!==void 0&&this.onwrite(()=>{let f=r(s,e),a=u=>{u!==void 0&&this.cycle(t,r,u)};f instanceof Promise?f.then(a):a(f)})};i instanceof Promise?i.then(o):o(i)})}};function Ct(n){return(n=n.trim())&&n.startsWith("(")&&n.endsWith(")")}function it(n,t,r,e=!0){r=(Array.isArray(r)?r:[r]).map(s=>(s+"").replace("(",e?"(.//":"(./")).join("|");let i=[],o;try{let s=n.document.evaluate(r,t,null,XPathResult.ANY_TYPE);for(;o=s.iterateNext();)i.push(o)}catch{}return i}function St(n,t,r){r=(Array.isArray(r)?r:[r]).map(e=>(e+"").replace("(","(self::")).join("|");try{return n.document.evaluate(`${r}`,t,null,XPathResult.BOOLEAN_TYPE).booleanValue}catch{}}function Tt(n,t="|"){return[...n].reduce(([r,e,i,o],s)=>!r&&e===0&&(Array.isArray(t)?t:[t]).includes(s)?[r,e,[""].concat(i)]:(!r&&["(","[","{"].includes(s)&&!i[0].endsWith("\\")&&e++,!r&&[")","]","}"].includes(s)&&!i[0].endsWith("\\")&&e--,['"',"'","`"].includes(s)&&!i[0].endsWith("\\")&&(r=r===s?null:r||s),i[0]+=s,[r,e,i]),[null,0,[""]])[2].reverse()}var S=class{constructor(t){this.content=t,this.type=typeof t=="string"?"selector":"instance",this.kind=this.type==="instance"?null:Ct(t)?"xpath":"css",this.kind==="xpath"&&(this.isXpathAttr=Tt(t.trim().slice(1,-1),"@").length>1)}toString(){return this.content}};var $=class{constructor(t,r,e){this.context=t,this.namespace=r,this.window=t.defaultView||t.ownerDocument?.defaultView||e,this.document=this.window.document,this.webqit=this.window.webqit,Object.defineProperty(this,"#",{value:{}})}resolveArgs(t){if(b(t[0])?t=[[],...t]:w(t[0])&&!(t[0]instanceof S)&&t.length===1?t=[[],void 0,t[0]]:w(t[1])&&t.length===2?t=[A(t[0],!1),void 0,t[1]]:t[0]=A(t[0],!1),t[0].filter(r=>typeof r!="string"&&!(r instanceof S)&&!(r instanceof this.window.Node)).length)throw new Error("Argument #2 must be either a string or a Node object, or a list of those.");return t[0]=t[0].map(r=>r instanceof S?r:new S(r)),t}registry(...t){return F("realdom.realtime",this.window,this.namespace,...t)}createSignalGenerator(){return{generate(){return this.lastController?.abort(),this.lastController=new AbortController,{signal:this.lastController.signal}},disconnect(){this.lastController?.abort()}}}forEachMatchingContext(t,r,e){let{window:i}=this,o=Array.isArray(r)?r:[r],s=new Set;for(let[f,a]of this.registry(t))for(let[u,l]of a){let m=o.filter(c=>u.contains(c.target)?f==="subtree"||c.target===u:!1);if(!!m.length){Array.isArray(r)||(m=m[0]);for(let c of l)s.add([c,m,u])}}for(let[f,a,u]of s)e.call(i,f,a,u)}disconnectables(t,...r){let e={disconnect(){r.forEach(i=>i&&b(i.disconnect)&&i.disconnect()||b(i)&&i()||w(i)&&(i.disconnected=!0))}};return t&&t.addEventListener("abort",()=>e.disconnect()),e}};var j=class extends ${constructor(t,...r){super(t,"attr",...r)}get(t,r=void 0,e={}){let i=typeof t=="string"||t instanceof S;[t=[],r=void 0,e={}]=this.resolveArgs(arguments);let{context:o}=this,s=jt(o,t);if(!r)return s;let f=e.lifecycleSignals&&this.createSignalGenerator();if(i)for(let a of s){let u=f?.generate()||{};r(a,u,o)}else{let a=f?.generate()||{};r(s,a,o)}if(e.live){f&&(e={...e,signalGenerator:f});let a=this.observe(i?t[0]:t,r,{newValue:!0,...e});return this.disconnectables(e.signal,a)}}observe(t,r,e={}){let i=typeof t=="string"||t instanceof S;if([t=[],r,e={}]=this.resolveArgs(arguments),["sync","intercept"].includes(e.timing))return this.observeSync(i?t[0]:t,r,e);if(e.timing&&e.timing!=="async")throw new Error(`Timing option "${e.timing}" invalid.`);let{context:o,window:s,webqit:f}=this;e.eventDetails&&!f.realdom.attrInterceptionHooks?.intercepting&&It.call(s,"intercept",()=>{});let a=new s.MutationObserver(c=>{c=Mt(c).map(p=>kt.call(s,p)),Pt.call(s,m,c,o)}),u={attributes:!0,attributeOldValue:e.oldValue,subtree:e.subtree};t.length&&(u.attributeFilter=t.map(c=>c+"")),a.observe(o,u);let l=e.signalGenerator||e.lifecycleSignals&&this.createSignalGenerator(),m={context:o,spec:t,callback:r,params:e,atomics:new Map,originalFilterIsString:i,signalGenerator:l,disconnectable:a};return this.disconnectables(e.signal,a,l)}observeSync(t,r,e={}){let i=typeof t=="string"||t instanceof S;[t,r,e={}]=this.resolveArgs(arguments);let{context:o,window:s}=this;if(e.timing&&!["sync","intercept"].includes(e.timing))throw new Error(`Timing option "${e.timing}" invalid.`);let f=e.timing==="intercept"?"intercept":"sync",a=e.subtree?"subtree":"children";this.registry(f).size||It.call(s,f,_=>{this.forEachMatchingContext(f,_,Pt)});let u={disconnect(){p.delete(m),p.size||c.delete(o)}},l=e.signalGenerator||e.lifecycleSignals&&this.createSignalGenerator(),m={context:o,spec:t,callback:r,params:e,atomics:new Map,originalFilterIsString:i,signalGenerator:l,disconnectable:u},c=this.registry(f,a);c.has(o)||c.set(o,new Set);let p=c.get(o);return p.add(m),this.disconnectables(e.signal,u,l)}};function Mt(n){return n.reduce((t,r,e)=>t[e-1]?.attributeName===r.attributeName?t:t.concat(r),[])}function Pt(n,t){let{context:r,spec:e,callback:i,params:o,atomics:s,originalFilterIsString:f,signalGenerator:a}=n,u=e.map(c=>c+"");if(o.atomic&&!s.size?t=jt(r,e,t):o.timing!=="async"&&e.length&&(t=t.filter(c=>u.includes(c.name))),!t.length)return;o.newValue===null&&o.oldValue===null&&o.eventDetails||(t=t.map(c=>{let p;return o.eventDetails||({event:p,...c}=c),!o.oldValue&&"oldValue"in c&&({oldValue:p,...c}=c),!o.newValue&&"value"in c?{value:p,...c}=c:o.newValue&&typeof c.value>"u"&&(c={...c,value:c.target.getAttribute(c.name)}),c})),o.atomic&&(t.forEach(c=>s.set(c.name,c)),t=Array.from(s.entries()).map(([,c])=>c));let l=f?t[0]:t,m=a?.generate()||{};i(l,m,r)}function jt(n,t,r=[]){let e={event:null,type:"attribute"};return t.length?t.map(o=>(o=o+"",r.find(s=>s.name===o)||{target:n,name:o,value:n.getAttribute(o),...e})):Array.from(n.attributes).map(o=>r.find(s=>s.name===o.nodeName)||{target:n,name:o.nodeName,value:o.nodeValue,...e})}function kt({target:n,attributeName:t,value:r,oldValue:e}){let s=(this.webqit.realdom.attrInterceptionRecords?.get(n)||{})[t]?.[0]||"mutation";return{target:n,name:t,value:r,oldValue:e,type:"observation",event:s}}function It(n,t){let r=this,{webqit:e,document:i,Element:o}=r;e.realdom.attrInterceptionHooks||Object.defineProperty(e.realdom,"attrInterceptionHooks",{value:new Map}),e.realdom.attrInterceptionHooks.has(n)||e.realdom.attrInterceptionHooks.set(n,new Set),e.realdom.attrInterceptionHooks.get(n).add(t);let s=()=>e.realdom.attrInterceptionHooks.get(n).delete(t);if(e.realdom.attrInterceptionHooks?.intercepting)return s;console.warn("Attr mutation APIs are now being intercepted."),e.realdom.attrInterceptionHooks.intercepting=!0,Object.defineProperty(e.realdom,"attrInterceptionRecords",{value:new Map});let f=(l,m)=>{e.realdom.attrInterceptionRecords.has(l.target)||e.realdom.attrInterceptionRecords.set(l.target,{});let c=e.realdom.attrInterceptionRecords.get(l.target);c[l.name]=c[l.name]||[],c[l.name].unshift(l.event),e.realdom.attrInterceptionHooks.get("intercept")?.forEach(_=>_([l]));let p=m();return e.realdom.attrInterceptionHooks.get("sync")?.forEach(_=>_([l])),p};new r.MutationObserver(l=>{l=l.filter(m=>!(r.webqit.realdom.attrInterceptionRecords?.get(m.target)||{})[m.attributeName]?.shift()),l=Mt(l).map(m=>kt.call(r,m)),l.length&&(e.realdom.attrInterceptionHooks.get("intercept")?.forEach(m=>m(l)),e.realdom.attrInterceptionHooks.get("sync")?.forEach(m=>m(l)))}).observe(i,{attributes:!0,subtree:!0,attributeOldValue:!0});let u=Object.create(null);return["setAttribute","removeAttribute","toggleAttribute"].forEach(l=>{u[l]=o.prototype[l],o.prototype[l]=function(...m){let c,p=this.getAttribute(m[0]);["setAttribute","toggleAttribute"].includes(l)&&(c=m[1]),l==="toggleAttribute"&&c===void 0&&(c=p===null);let _={target:this,name:m[0],value:c,oldValue:p,type:"interception",event:[this,l]};return f(_,()=>u[l].call(this,...m))}}),s}var J=class extends ${constructor(t,...r){super(t,"tree",...r)}attr(t,r=void 0,e={}){let{context:i,window:o}=this;return new j(i,o).get(...arguments)}query(t,r=void 0,e={}){[t,r=void 0,e={}]=this.resolveArgs(arguments);let{context:i}=this,o=new Map,s=u=>(o.has(u)||o.set(u,{target:u,entrants:[],exits:[],type:"query",event:null}),o.get(u));if(!e.generation||e.generation==="entrants"){if(!t.length)[...i.children].forEach(u=>s(i).entrants.push(u));else if(t.every(u=>u.type==="selector")){let[u,l]=t.reduce(([c,p],_)=>_.kind==="xpath"?[c,p.concat(_)]:[c.concat(_),p],[[],[]]),m=[];e.subtree?(u.length&&m.push(...i.querySelectorAll(u.join(","))),l.length&&m.push(...it(this.window,i,l))):(u.length&&m.push(...[...i.children].filter(c=>c.matches(u))),l.length&&m.push(...it(this.window,i,l,!1))),m.forEach(c=>s(c.parentNode||i).entrants.push(c))}}if(!r)return o;let f={disconnected:!1},a=r&&e.lifecycleSignals&&this.createSignalGenerator();for(let[,u]of o){if(f.disconnected)break;let l=a?.generate()||{};r(u,l,i)}if(e.live){a&&(e={...e,signalGenerator:a});let u=this.observe(t,r,e);return this.disconnectables(e.signal,f,u)}return this.disconnectables(e.signal,f,a)}children(t,r=void 0,e={}){return[t,r=void 0,e={}]=this.resolveArgs(arguments),this.query(t,r,{...e,subtree:!1})}subtree(t,r=void 0,e={}){return[t,r=void 0,e={}]=this.resolveArgs(arguments),this.query(t,r,{...e,subtree:!0})}observe(t,r,e={}){if([t,r,e={}]=this.resolveArgs(arguments),["sync","intercept"].includes(e.timing))return this.observeSync(t,r,e);if(e.timing&&e.timing!=="async")throw new Error(`Timing option "${e.timing}" invalid.`);let{context:i,window:o,webqit:s,document:f}=this;e.eventDetails&&(s.realdom.domInterceptionRecordsAlwaysOn=!0),(f.readyState==="loading"||s.realdom.domInterceptionRecordsAlwaysOn)&&!s.realdom.domInterceptionHooks?.intercepting&&$t.call(o,"sync",()=>{});let a=new o.MutationObserver(m=>m.forEach(c=>{pt.call(o,l,Lt.call(o,c),i)}));a.observe(i,{childList:!0,subtree:e.subtree});let u=e.signalGenerator||e.lifecycleSignals&&this.createSignalGenerator(),l={context:i,spec:t,callback:r,params:e,signalGenerator:u,disconnectable:a};if(e.staticSensitivity){let m=Ht.call(o,l);return this.disconnectables(e.signal,a,u,m)}return this.disconnectables(e.signal,a,u)}observeSync(t,r,e={}){[t,r,e={}]=this.resolveArgs(arguments);let{context:i,window:o}=this;if(e.timing&&!["sync","intercept"].includes(e.timing))throw new Error(`Timing option "${e.timing}" invalid.`);let s=e.timing==="intercept"?"intercept":"sync",f=e.subtree?"subtree":"children";this.registry(s).size||$t.call(o,s,_=>{this.forEachMatchingContext(s,_,pt)});let a=new o.MutationObserver(_=>_.forEach(d=>{Array.isArray((d=Lt.call(o,d)).event)||pt.call(o,m,d,i)}));a.observe(i,{childList:!0,subtree:e.subtree});let u={disconnect(){a.disconnect(),p.delete(m),p.size||c.delete(i)}},l=e.signalGenerator||e.lifecycleSignals&&this.createSignalGenerator(),m={context:i,spec:t,callback:r,params:e,signalGenerator:l,disconnectable:u},c=this.registry(s,f);c.has(i)||c.set(i,new Set);let p=c.get(i);if(p.add(m),e.staticSensitivity){let _=Ht.call(o,m);return this.disconnectables(e.signal,u,l,_)}return this.disconnectables(e.signal,u,l)}};function Ht(n){let t=this,{context:r,spec:e,callback:i,params:o,signalGenerator:s}=n,f=e.filter(p=>p.kind==="css"),a=p=>p.match(/\.([\w-]+)/g)?.length?["class"]:[],u=p=>p.match(/#([\w-]+)/g)?.length?["id"]:[],l=p=>[...p.matchAll(/\[([^\=\]]+)(\=[^\]]+)?\]/g)].map(_=>_[1]).concat(a(p)).concat(u(p));if(!(n.$attrs=Array.from(new Set(f.filter(p=>(p+"").includes("[")).reduce((p,_)=>p.concat(l(_+"")),[])))).length)return;let m=new Set,c=new Set;return m.push=p=>(c.delete(p),m.add(p)),c.push=p=>(m.delete(p),c.add(p)),n.$deliveryCache={entrants:m,exits:c},new j(r,t).observe(n.$attrs,p=>{let _=new Map,d=h=>(_.has(h)||_.set(h,{target:h,entrants:[],exits:[],type:"static",event:null}),_.get(h)),O=new WeakMap,g=h=>(O.has(h)||O.set(h,f.some(x=>h.matches(x+""))),O.get(h));for(let h of p)["entrants","exits"].forEach(x=>{o.generation&&x!==o.generation||n.$deliveryCache[x].has(h.target)||(x==="entrants"?!g(h.target):g(h.target))||(n.$deliveryCache[x].push(h.target),d(h.target)[x].push(h.target),d(h.target).event=h.event)});for(let[,h]of _){let x=s?.generate()||{};i(h,x,r)}},{subtree:o.subtree,timing:o.timing,eventDetails:o.eventDetails})}function pt(n,t){let{context:r,spec:e,callback:i,params:o,signalGenerator:s,$deliveryCache:f}=n,a={...t,entrants:[],exits:[]};if(o.eventDetails||delete a.event,["entrants","exits"].forEach(l=>{if(!(o.generation&&l!==o.generation)&&(e.length?a[l]=se.call(this,e,t[l],t.event!=="parse"):a[l]=[...t[l]],!!f))for(let m of a[l])f[l].push(m)}),!a.entrants.length&&!a.exits.length)return;let u=s?.generate()||{};i(a,u,r)}function se(n,t,r){t=Array.isArray(t)?t:[...t];let e=(i,o)=>{if(o.type==="selector"){let s=o.isXpathAttr?[]:i.filter(f=>o.kind==="xpath"?St(this,f,o+""):f.matches&&f.matches(o+""));if((r||o.isXpathAttr)&&(s=i.reduce((f,a)=>o.kind==="xpath"?[...f,...it(this,a,o,r)]:a.querySelectorAll?[...f,...a.querySelectorAll(o+"")]:f,s)),s.length)return s}else if(i.includes(o.content)||r&&i.some(s=>s.contains(o.content)))return[o.content]};return t.$$searchCache||(t.$$searchCache=new Map),n.reduce((i,o)=>{let s;return t.$$searchCache.has(o.content)?s=t.$$searchCache.get(o.content):(s=e(t,o)||[],o.type==="instance"&&t.$$searchCache.set(o.content,s)),i.concat(s)},[])}function Lt({target:n,addedNodes:t,removedNodes:r}){let e=this,i;return i=A(t).reduce((o,s)=>o||e.webqit.realdom.domInterceptionRecords?.get(s),null),i=A(r).reduce((o,s)=>o||e.webqit.realdom.domInterceptionRecords?.get(s),i),i=i||e.document.readyState==="loading"&&"parse"||"mutation",{target:n,entrants:t,exits:r,type:"observation",event:i}}function $t(n,t){let r=this,{webqit:e,document:i,Node:o,CharacterData:s,Element:f,HTMLElement:a,HTMLTemplateElement:u,DocumentFragment:l}=r;e.realdom.domInterceptionHooks||Object.defineProperty(e.realdom,"domInterceptionHooks",{value:new Map}),e.realdom.domInterceptionHooks.has(n)||e.realdom.domInterceptionHooks.set(n,new Set),e.realdom.domInterceptionHooks.get(n).add(t);let m=()=>e.realdom.domInterceptionHooks.get(n).delete(t);if(e.realdom.domInterceptionHooks?.intercepting)return m;console.warn("DOM mutation APIs are now being intercepted."),e.realdom.domInterceptionHooks.intercepting=!0,Object.defineProperty(e.realdom,"domInterceptionRecords",{value:new Map});let c=(d,O)=>{d.entrants.concat(d.exits).forEach(h=>{clearTimeout(e.realdom.domInterceptionRecords.get(h)?.timeout),e.realdom.domInterceptionRecords.set(h,d.event);let x=setTimeout(()=>{e.realdom.domInterceptionRecords.delete(h)},0);Object.defineProperty(d.event,"timeout",{value:x,configurable:!0})}),e.realdom.domInterceptionHooks.get("intercept")?.forEach(h=>h(d));let g=O();return e.realdom.domInterceptionHooks.get("sync")?.forEach(h=>h(d)),g},p={characterData:Object.create(null),other:Object.create(null)};["insertBefore","insertAdjacentElement","insertAdjacentHTML","setHTML","replaceChildren","replaceWith","remove","replaceChild","removeChild","before","after","append","prepend","appendChild"].forEach(d=>{function O(...g){let h=this instanceof s?p.characterData:p.other,x=()=>h[d].call(this,...g);if(!(this instanceof s||this instanceof f||this instanceof l))return x();let P=[],E=[],R=this;["insertBefore"].includes(d)?E=[g[0]]:["insertAdjacentElement","insertAdjacentHTML"].includes(d)?(E=[g[1]],["beforebegin","afterend"].includes(g[0])&&(R=this.parentNode)):["setHTML","replaceChildren"].includes(d)?(P=[...this.childNodes],E=d==="replaceChildren"?[...g]:[g[0]]):["replaceWith","remove"].includes(d)?(P=[this],E=d==="replaceWith"?[...g]:[],R=this.parentNode):["replaceChild"].includes(d)?(P=[g[1]],E=[g[0]]):["removeChild"].includes(d)?P=[...g]:(E=[...g],["before","after"].includes(d)&&(R=this.parentNode));let L=d;if(["insertAdjacentHTML","setHTML"].includes(d)){let bt=this.nodeName;if(d==="insertAdjacentHTML"&&["beforebegin","afterend"].includes(g[0])){if(!this.parentNode)return h[d].call(this,...g);bt=this.parentNode.nodeName}let K=i.createElement(bt);h.setHTML.call(K,E[0],d==="setHTML"?g[1]:{}),E=[...K.childNodes],d==="insertAdjacentHTML"?(L="insertAdjacentElement",g[1]=new l,g[1].______isTemp=!0,g[1].append(...K.childNodes)):(L="replaceChildren",g=[...K.childNodes])}return c({target:R,entrants:E,exits:P,type:"interception",event:[this,d]},()=>h[L].call(this,...g))}["insertBefore","replaceChild","removeChild","appendChild"].includes(d)?(p.other[d]=o.prototype[d],o.prototype[d]=O):(["after","before","remove","replaceWith"].includes(d)&&(p.characterData[d]=s.prototype[d],s.prototype[d]=O),f.prototype[d]&&(p.other[d]=f.prototype[d],f.prototype[d]=O))});let _=Object.create(null);return["outerHTML","outerText","innerHTML","innerText","textContent","nodeValue"].forEach(d=>{let O=["textContent","nodeValue"].includes(d)?o:["outerText","innerText"].includes(d)?a:f;_[d]=Object.getOwnPropertyDescriptor(O.prototype,d),Object.defineProperty(O.prototype,d,{..._[d],set:function(g){let h=()=>_[d].set.call(this,g);if(!(this instanceof f))return h();let x=[],P=[],E=this;if(["outerHTML","outerText"].includes(d)?(x=[this],E=this.parentNode):x=[...this.childNodes],["outerHTML","innerHTML"].includes(d)){let L=this.nodeName;if(d==="outerHTML"){if(!this.parentNode)return h();L=this.parentNode.nodeName}let D=i.createElement(L==="TEMPLATE"?"div":L);_[d].set.call(D,g),P=this instanceof u?[]:[...D.childNodes],d==="outerHTML"?(g=new l,g.______isTemp=!0,g.append(...D.childNodes),h=()=>f.prototype.replaceWith.call(this,g)):this instanceof u?h=()=>this.content.replaceChildren(...D.childNodes):h=()=>f.prototype.replaceChildren.call(this,...D.childNodes)}return c({target:E,entrants:P,exits:x,type:"interception",event:[this,d]},h)}})}),["append","prepend","replaceChildren"].forEach(d=>{[i,l.prototype].forEach(O=>{let g=O[d];O[d]=function(...h){if(this.______isTemp)return g.call(this,...h);let x=d==="replaceChildren"?[...this.childNodes]:[];return c({target:this,entrants:h,exits:x,type:"interception",event:[this,d]},()=>g.call(this,...h))}})}),m}function Dt(){fe.call(this),le.call(this),ce.call(this)}function fe(){let n=this;n.CSS||(n.CSS={}),n.CSS.escape||(n.CSS.escape=t=>t.replace(/([\:@\~\$\&])/g,"\\$1"))}function le(){let n=this;"isConnected"in n.Node.prototype||Object.defineProperty(n.Node.prototype,"isConnected",{get:function(){return!this.ownerDocument||!(this.ownerDocument.compareDocumentPosition(this)&this.DOCUMENT_POSITION_DISCONNECTED)}})}function ce(){let n=this;n.Element.prototype.matches||(n.Element.prototype.matches=n.Element.prototype.matchesSelector||n.Element.prototype.mozMatchesSelector||n.Element.prototype.msMatchesSelector||n.Element.prototype.oMatchesSelector||n.Element.prototype.webkitMatchesSelector||function(t){for(var r=(this.document||this.ownerDocument).querySelectorAll(t),e=r.length;--e>=0&&r.item(e)!==this;);return e>-1})}function Ft(){let n=this;if(n.webqit||(n.webqit={}),n.webqit.realdom)return n.webqit.realdom;n.webqit.realdom={},Dt.call(n),n.webqit.realdom.meta=(...r)=>ue.call(n,...r),n.webqit.realdom.ready=(...r)=>ht.call(n,...r),n.webqit.realdom.realtime=(r,e="dom")=>{if(e==="dom")return new J(r,n);if(e==="attr")return new j(r,n)};let t=new z(n);return n.webqit.realdom.schedule=(r,...e)=>t[`on${r}`](...e),n.webqit.realdom.synthesizeWhile=(...r)=>t.synthesizeWhile(...r),n.webqit.realdom}function ht(...n){let t="interactive",r;N(n[0])?(t=n[0],b(n[1])&&(r=n[1])):b(n[0])&&(r=n[0]);let e={interactive:["interactive","complete"],complete:["complete"]};if(!e[t])throw new Error(`Invalid ready-state timing: ${t}.`);let i=this;if(!r)return i.webqit.realdom.readyStatePromises||(i.webqit.realdom.readyStatePromises={interactive:new Promise(o=>ht.call(this,"interactive",o)),complete:new Promise(o=>ht.call(this,"complete",o))}),i.webqit.realdom.readyStatePromises[t];if(e[t].includes(i.document.readyState))return r(i);i.webqit.realdom.readyStateCallbacks||(i.webqit.realdom.readyStateCallbacks={interactive:[],complete:[]},i.document.addEventListener("readystatechange",()=>{let o=i.document.readyState;for(let s of i.webqit.realdom.readyStateCallbacks[o].splice(0))s(i)},!1)),i.webqit.realdom.readyStateCallbacks[t].push(r)}function ue(n){let t=this,r={},e;return(e=t.document.querySelector(`meta[name="${n}"]`))&&(r=(e.content||"").split(";").filter(i=>i).reduce((i,o)=>{let s=o.split("=").map(f=>f.trim());return mt(i,s[0].split("."),s[1]==="true"?!0:s[1]==="false"?!1:C(s[1])?parseInt(s[1]):s[1]),i},{})),{get name(){return n},get content(){return e.content},json(){return JSON.parse(JSON.stringify(r))}}}function ot(n,t){return typeof n!="string"?n:n.replace(/\w\S*/g,function(r){return r.charAt(0).toUpperCase()+(typeof t!==void 0&&t?r.substr(1).toLowerCase():r.substr(1))})}var k=(...n)=>F("oohtml",...n),q={};function Nt(n,t,r){let e=this,i=Ft.call(e);q.window=e,e.webqitConfig||(e.webqitConfig=i.meta("webqit").json()),e.webqit||(e.webqit={}),e.webqit.oohtml||(e.webqit.oohtml={}),e.webqit.oohtml.configs||(e.webqit.oohtml.configs={});let o=n.toUpperCase().replace("-","_");if(!e.webqit.oohtml.configs[o]){e.webqit.oohtml.configs[o]={};let s=e.webqit.oohtml.configs[o];X(2,s,r,t,i.meta(n).json()),e.webqitConfig.prefix&&Object.keys(s).forEach(f=>{Object.keys(s[f]).forEach(a=>{f==="api"&&typeof s[f][a]=="string"?s[f][a]=`${e.webqitConfig.prefix}${ot(s[f][a])}`:["attr","elements"].includes(f)&&s[f][a]?.startsWith("data-")===!1&&(s[f][a]=`${e.webqitConfig.prefix}-${s[f][a]}`)})})}return{config:e.webqit.oohtml.configs[o],realdom:i,window:e}}function Rt(){let{window:n}=q,{webqit:t}=n;if(t.DOMContextRequestEvent)return t.DOMContextRequestEvent;class r extends n.Event{constructor(...i){let o=i.pop();if(typeof o!="function")throw new Error("Callback must be provided.");let s=i.pop();if(!s?.kind)throw new Error('"options.kind" must be specified.');let f=["contextrequest","contextclaim"],a=i.pop()||f[0];if(!f.includes(a))throw new Error(`Invalid event type. Must be one of: ${f.join(",")}`);let{kind:u,detail:l,targetContext:m,live:c,signal:p,diff:_,...d}=s;super(a,{...d,bubbles:d.bubbles!==!1}),Object.defineProperty(this,"callback",{get:()=>o}),Object.defineProperty(this,"kind",{get:()=>u}),Object.defineProperty(this,"targetContext",{get:()=>m}),Object.defineProperty(this,"detail",{get:()=>l}),Object.defineProperty(this,"live",{get:()=>c}),Object.defineProperty(this,"signal",{get:()=>p}),Object.defineProperty(this,"diff",{get:()=>_}),Object.defineProperty(this,"options",{get:()=>d})}respondWith(i){if(this.diff){if("_prevValue"in this&&this._prevValue===i)return;Object.defineProperty(this,"_prevValue",{value:i,configurable:!0})}return this.callback(i)}}return t.DOMContextRequestEvent=r,r}var Y=class extends AbortController{constructor(t){super(),t(r=>{let{window:{webqit:{Observer:e}}}=q;e.defineProperty(this,"value",{value:r,configurable:!0,enumerable:!0})},this)}};var Q=class extends Error{};var Z=class{static instance(t){return k(t).get("contexts::instance")||new this(t)}constructor(t){k(t).get("contexts::instance")?.dispose(),k(t).set("contexts::instance",this);let r={host:t,contexts:new Set};Object.defineProperty(this,"#",{get:()=>r})}get[Symbol.iterator](){return this["#"].contexts[Symbol.iterator]}get length(){return this["#"].contexts.size}find(...t){return[...this["#"].contexts].find(r=>typeof t[0]=="function"?t[0](r):r.constructor.kind===t[0]&&(t.length===1||r.detail===t[1]))}attach(t){if(!(t instanceof H))throw new TypeError("Context is not a valid DOMContext instance.");if(this.find(t.constructor.kind,t.detail))throw new Q(`Context of same kind "${t.constructor.kind}"${t.detail?` and detail "${t.detail}"`:""} already exists.`);this["#"].contexts.add(t),t.initialize(this["#"].host)}detach(t){t.dispose(this["#"].host),this["#"].contexts.delete(t)}request(...t){return new Y((r,e)=>{typeof t[t.length-1]!="function"&&(t[t.length-1]?t.push(r):t[t.length-1]=r);let i;(i=t.find(s=>typeof s=="object"&&s))&&i.live&&(i.signal&&i.signal.addEventListener("abort",()=>e.abort()),t[t.indexOf(i)]={...i,signal:e.signal});let o=new(Rt())(...t);this["#"].host.dispatchEvent(o)})}};var gt=class{static createRequest(){return{kind:this.kind}}constructor(t=null){Object.defineProperty(this,"detail",{get:()=>t}),Object.defineProperty(this,"subscriptions",{value:new Set})}get configs(){let{window:{webqit:{oohtml:{configs:t}}}}=q;return t}get name(){return this.host===q.window.document?1/0:this.host.getAttribute(this.configs.CONTEXT_API.attr.contextname)}subscribed(t){}handle(t){}unsubscribed(t){}matchEvent(t){return t.kind===this.constructor.kind&&(!t.targetContext||t.targetContext===this.name)}handleEvent(t){if(!(this.disposed||typeof t.respondWith!="function")){if(t.type==="contextclaim"){if(t.target===this.host||!(t.detail instanceof gt))return;let r=new Set;return this.subscriptions.forEach(e=>{!t.target.contains(e.target)||!t.detail.matchEvent(e)||(t.stopPropagation(),this.subscriptions.delete(e),r.add(e))}),t.respondWith(r)}if(t.type==="contextrequest")return this.matchEvent(t)?(t.live&&(this.subscriptions.add(t),this.subscribed(t),t.signal?.addEventListener("abort",()=>{this.subscriptions.delete(t),this.unsubscribed(t)})),t.stopPropagation(),this.handle(t)):void 0}}initialize(t){this.host=t,this.disposed=!1,t.addEventListener("contextrequest",this),t.addEventListener("contextclaim",this);let{value:r}=Z.instance(t).request("contextclaim",{kind:this.constructor.kind,detail:this});return r?.forEach(e=>{this.subscriptions.add(e),this.subscribed(e),this.handle(e)}),this}dispose(t){return this.disposed=!0,t.removeEventListener("contextrequest",this),t.removeEventListener("contextclaim",this),this.subscriptions.forEach(r=>{this.subscriptions.delete(r),this.unsubscribed(r);let{target:e}=r;e.dispatchEvent(r)}),this}},H=gt;tt(H,"kind");var M=class extends H{static createRequest(t=null){let r=super.createRequest();if(t?.startsWith("@")){let[e,...i]=i.slice(1).split(".").map(o=>o.trim());r.targetContext=e,r.detail=i.join(".")}else r.detail=t;return r}get bindingsObj(){return this.host[this.configs.BINDINGS_API.api.bindings]}matchEvent(t){return super.matchEvent(t)&&(!t.detail||!this.detail||(Array.isArray(t.detail)?t.detail[0]===this.detail:t.detail===this.detail))}handle(t){if(t._controller?.abort(),!(t.detail+"").trim())return t.respondWith(this.bindingsObj);let{window:{webqit:{Observer:r}}}=q;t._controller=r.reduce(this.bindingsObj,Array.isArray(t.detail)?t.detail:[t.detail],r.get,e=>{this.disposed||t.respondWith(e.value)},{live:t.live,signal:t.signal,descripted:!0})}unsubscribed(t){t._controller?.abort()}};tt(M,"kind","bindings");function _t(n={}){let{config:t,window:r}=Nt.call(this,"bindings-api",n,{attr:{bindingsreflection:"bindings"},api:{bind:"bind",bindings:"bindings"}});r.webqit.DOMBindingsContext=M,de.call(r,t)}function yt(n,t){let r=this,{webqit:{Observer:e,oohtml:{configs:{CONTEXT_API:i}}}}=r;if(!k(t).has("bindings")){let o=Object.create(null);k(t).set("bindings",o),e.observe(o,s=>{let f=Object.keys(o),a=t===r.document?r.document.documentElement:t,u=n.attr.bindingsreflection;f.length&&u?a.setAttribute(n.attr.bindingsreflection,f.join(" ")):u&&a.toggleAttribute(n.attr.bindingsreflection,!1);let l=t[i.api.contexts];for(let m of s)if(m.type==="delete"){let c=l.find(M.kind,m.key);c&&l.detach(c)}else l.find(M.kind,m.key)||l.attach(new M(m.key))})}return k(t).get("bindings")}function de(n){let t=this,{webqit:{Observer:r}}=t;if(n.api.bind in t.document)throw new Error(`document already has a "${n.api.bind}" property!`);if(n.api.bindings in t.document)throw new Error(`document already has a "${n.api.bindings}" property!`);if(n.api.bind in t.Element.prototype)throw new Error(`The "Element" class already has a "${n.api.bind}" property!`);if(n.api.bindings in t.Element.prototype)throw new Error(`The "Element" class already has a "${n.api.bindings}" property!`);Object.defineProperty(t.document,n.api.bind,{value:function(e,i={}){return Vt.call(t,n,t.document,e,i)}}),Object.defineProperty(t.document,n.api.bindings,{get:function(){return r.proxy(yt.call(t,n,t.document))}}),Object.defineProperty(t.Element.prototype,n.api.bind,{value:function(e,i={}){return Vt.call(t,n,this,e,i)}}),Object.defineProperty(t.Element.prototype,n.api.bindings,{get:function(){return r.proxy(yt.call(t,n,this))}})}function Vt(n,t,r,{merge:e,diff:i,namespace:o}={}){let s=this,{webqit:{Observer:f}}=s,a=yt.call(this,n,t),u={diff:i,namespace:o},l=e?[]:f.ownKeys(a,u).filter(m=>!(m in r));return f.batch(a,()=>(l.length&&f.deleteProperties(a,l,u),f.set(a,r,u)),u)}_t.call(window);})();
|
|
2
2
|
//# sourceMappingURL=bindings-api.js.map
|