@twobirds/microcomponents 0.0.64 → 0.0.66
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/.vscode/settings.json +1 -1
- package/assets/documentation/MC.md +146 -28
- package/assets/documentation/elements.md +4 -2
- package/assets/documentation/observables.md +2 -0
- package/assets/test.html +1 -1
- package/dist/MC.d.ts.map +1 -1
- package/dist/MC.min.js +20 -15
- package/dist/MC.ts +23 -16
- package/dist/elements.min.js +1 -1
- package/dist/formvValues.min.js +1 -1
- package/dist/microcomponents.min.js +1 -1
- package/dist/observables.d.ts.map +1 -1
- package/dist/observables.min.js +1 -1
- package/dist/observables.ts +0 -3
- package/dist/selectors.min.js +1 -1
- package/package.json +4 -4
- package/public/MC.js +20 -15
- package/public/MC.js.map +1 -1
- package/public/MC.min.js +20 -15
- package/public/assets/highlight.css +99 -0
- package/public/assets/icons.js +18 -0
- package/public/assets/icons.svg +1 -0
- package/public/assets/main.js +60 -0
- package/public/assets/navigation.js +1 -0
- package/public/assets/search.js +1 -0
- package/public/assets/style.css +1493 -0
- package/public/classes/MC.DC.html +12 -0
- package/public/classes/MC.MC.html +6 -0
- package/public/classes/MC.McBase.html +3 -0
- package/public/classes/MC.McEvent.html +9 -0
- package/public/elements.min.js +1 -1
- package/public/formvValues.min.js +1 -1
- package/public/functions/MC.addListener.html +1 -0
- package/public/functions/MC.autoload.html +1 -0
- package/public/functions/MC.removeListener.html +1 -0
- package/public/functions/elements.defineCE.html +1 -0
- package/public/functions/elements.getCE.html +1 -0
- package/public/functions/formValues.formValues.html +1 -0
- package/public/functions/observables.observe.html +1 -0
- package/public/functions/selectors._d.html +1 -0
- package/public/functions/selectors._t.html +1 -0
- package/public/hierarchy.html +1 -0
- package/public/index.html +56 -0
- package/public/interfaces/MC.HTMLMcElement.html +758 -0
- package/public/interfaces/selectors.DSelector.html +50 -0
- package/public/interfaces/selectors.TSelector.html +34 -0
- package/public/microcomponents.min.js +1 -1
- package/public/modules/MC.html +9 -0
- package/public/modules/elements.html +3 -0
- package/public/modules/formValues.html +2 -0
- package/public/modules/observables.html +3 -0
- package/public/modules/selectors.html +7 -0
- package/public/modules.html +6 -0
- package/public/observables.js.map +1 -1
- package/public/observables.min.js +1 -1
- package/public/selectors.min.js +1 -1
- package/public/types/observables.Observable.html +1 -0
- package/public/types/selectors.selection.html +1 -0
- package/public/types/selectors.singleSelector.html +1 -0
- package/src/MC.ts +23 -16
- package/src/observables.ts +0 -3
- package/src/test/testmc.ts +7 -1
- package/webpack.config.js +2 -2
- package/assets/documentation/comparision.md +0 -0
- package/assets/documentation/how_tos.md +0 -0
- package/assets/documentation/introduction.md +0 -0
- package/assets/documentation/proposal_draft.md +0 -37
- package/public/3d.html +0 -42
- package/public/documentation/MC.md +0 -470
- package/public/documentation/ajaxian-1.png +0 -0
- package/public/documentation/ajaxian-2.png +0 -0
- package/public/documentation/ajaxian-3.png +0 -0
- package/public/documentation/comparision.md +0 -0
- package/public/documentation/elements.md +0 -276
- package/public/documentation/functional_requirements.md +0 -8
- package/public/documentation/history.md +0 -436
- package/public/documentation/how_tos.md +0 -0
- package/public/documentation/introduction.md +0 -0
- package/public/documentation/magic.md +0 -29
- package/public/documentation/observables.md +0 -105
- package/public/documentation/proposal_draft.md +0 -37
- package/public/documentation/rnd0023-1.jpg +0 -0
- package/public/documentation/rnd0023-2.jpg +0 -0
- package/public/documentation/rnd0023-3.jpg +0 -0
- package/public/documentation/tB_react.md +0 -207
- package/public/documentation/usage.md +0 -142
- package/public/documentation/why.md +0 -25
- package/public/fiddle/MicroComponents.svg +0 -15
- package/public/fiddle/fiddle.css +0 -0
- package/public/fiddle/fiddle.js +0 -0
- package/public/fiddle/index.html +0 -0
- package/public/grandparent.css +0 -13
- package/public/my-tag.css +0 -19
- package/public/src/MC.ts +0 -598
- package/public/src/McEvent.ts +0 -96
- package/public/src/autoloader.ts +0 -98
- package/public/src/elements.ts +0 -76
- package/public/src/formValues.ts +0 -233
- package/public/src/helpers.ts +0 -149
- package/public/src/microcomponents.ts +0 -8
- package/public/src/observables.ts +0 -404
- package/public/src/selectors.ts +0 -1634
- package/public/src/test.ts +0 -193
- package/public/test/child.js +0 -15
- package/public/test/child.js.map +0 -1
- package/public/test/grandchild.js +0 -15
- package/public/test/grandchild.js.map +0 -1
- package/public/test/grandparent.js +0 -15
- package/public/test/grandparent.js.map +0 -1
- package/public/test/greatgrandchild.js +0 -29
- package/public/test/greatgrandchild.js.map +0 -1
- package/public/test/parent.js +0 -15
- package/public/test/parent.js.map +0 -1
- package/public/test/testform.js +0 -141
- package/public/test/testform.js.map +0 -1
- package/public/test/testmc.js +0 -10
- package/public/test/testmc.js.map +0 -1
- package/public/test.html +0 -27
- /package/public/{MicroComponents.svg → media/MicroComponents.svg} +0 -0
package/.vscode/settings.json
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+

|
|
2
|
+
|
|
3
|
+
# Micro Component Documentation
|
|
2
4
|
|
|
3
5
|
This document details a lightweight JavaScript framework for creating and managing "microcomponents" (MCs) associated with DOM elements or other microcomponents. It allows you to define reusable components and attach them to build complex functionalities.
|
|
4
6
|
|
|
@@ -19,7 +21,7 @@ The framework exports 2 main classes:
|
|
|
19
21
|
- [DOM Traversal](#dom-traversal)
|
|
20
22
|
- [Autoloading Concept](#autoloading-concept)
|
|
21
23
|
- [Important Rule](#important-rule)
|
|
22
|
-
- [
|
|
24
|
+
- [Classes](#classes)
|
|
23
25
|
- [Not Exported: `McBase` (Superclass)](#not-exported-mcbase-superclass)
|
|
24
26
|
- [Exported: `MC` Class](#exported-mc-class)
|
|
25
27
|
- [Exported: `DC` Class](#exported-dc-class)
|
|
@@ -35,28 +37,11 @@ The framework exports 2 main classes:
|
|
|
35
37
|
- [Auto-attaching DOM Listeners](#auto-attaching-dom-listeners)
|
|
36
38
|
- [Lifecycle Events](#lifecycle-events)
|
|
37
39
|
- [Init](#init)
|
|
38
|
-
- [Destroy (TBD)](#destroy-tbd)
|
|
39
|
-
- [Helper Functions (Internal)](#helper-functions-internal)
|
|
40
|
-
- [`isBrowser()`](#isbrowser)
|
|
41
|
-
- [`nativeEventNames`](#nativeeventnames)
|
|
42
|
-
- [`getMicroComponents(...)`](#getmicrocomponents)
|
|
43
|
-
- [`traverseNodes(...)`](#traversenodes)
|
|
44
|
-
- [`isDOM(...)`](#isdom)
|
|
45
|
-
- [`addListener(...)`](#addlistener)
|
|
46
|
-
- [`removeListener(...)`](#removelistener)
|
|
47
|
-
- [`add(...)`](#add)
|
|
48
|
-
- [`remove(...)`](#remove)
|
|
49
|
-
- [`trigger(...)`](#trigger)
|
|
50
|
-
- [`init(...)`](#init-helper)
|
|
51
|
-
- [`autoAttachListeners(...)`](#autoattachlisteners)
|
|
52
|
-
- [`bubbleEvent(...)`](#bubbleevent)
|
|
53
|
-
- [Autoloading Implementation](#autoloading-implementation)
|
|
54
|
-
- [`autoload(enable?)`](#autoload)
|
|
55
|
-
- [`loadit()`](#loadit)
|
|
56
40
|
- [Interfaces and Types](#interfaces-and-types)
|
|
57
41
|
- [`LooseObject`](#looseobject)
|
|
58
42
|
- [`McEvent`](#mcevent)
|
|
59
43
|
- [`HTMLMcElement`](#htmlmcelement)
|
|
44
|
+
- [Autoloading](#auto-loading)
|
|
60
45
|
|
|
61
46
|
## Usage Guidance
|
|
62
47
|
|
|
@@ -122,7 +107,7 @@ An optional feature (`autoload()`) that automatically detects specific HTML tags
|
|
|
122
107
|
|
|
123
108
|
**Your own application code MUST NOT overwrite the core properties and methods provided by the `McBase`, `MC`, and `DC` classes (like `_mc`, `target`, `trigger`, `parent`, etc.). Doing so may break framework functionality.**
|
|
124
109
|
|
|
125
|
-
##
|
|
110
|
+
## Classes
|
|
126
111
|
|
|
127
112
|
### Not Exported: `McBase` (Superclass)
|
|
128
113
|
|
|
@@ -454,17 +439,150 @@ class MyLifecycleComponent extends DC {
|
|
|
454
439
|
}
|
|
455
440
|
}
|
|
456
441
|
```
|
|
442
|
+
## Auto Loading
|
|
443
|
+
|
|
444
|
+
`autoload()` provides a **progressive enhancement** strategy. It allows you to declare custom elements or special micro components in your HTML without needing to include all their JavaScript code upfront.
|
|
445
|
+
|
|
446
|
+
The necessary code is fetched and executed only when these components actually appear in the DOM, potentially improving initial page load time and resource usage.
|
|
447
|
+
|
|
448
|
+
### Enabling
|
|
449
|
+
|
|
450
|
+
- If you call **`autoload(true)`** (or just **`autoload()`** as true is the parameter default), it initializes a MutationObserver.
|
|
451
|
+
This observer watches the document.body for any changes to its child elements or subtree (e.g., when new elements are added to the page).
|
|
452
|
+
|
|
453
|
+
**./autoload.html**
|
|
454
|
+
```html
|
|
455
|
+
<!DOCTYPE html>
|
|
456
|
+
<html lang="en">
|
|
457
|
+
<head>
|
|
458
|
+
<meta charset="UTF-8" />
|
|
459
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
460
|
+
<title>Humble Beginnings</title>
|
|
461
|
+
<script src="./microcomponents.min.js"></script>
|
|
462
|
+
<script>
|
|
463
|
+
Object.assign(window, microcomponents); // make system global
|
|
464
|
+
autoload(true); // automatically load web components that are undefined
|
|
465
|
+
</script>
|
|
466
|
+
</head>
|
|
467
|
+
<body>
|
|
468
|
+
<div _mc="test-mymc"></div> <!--- example of a auto-loading micro component --->
|
|
469
|
+
<test-component></test-component> <!--- example of a auto-loading custom element --->
|
|
470
|
+
</body>
|
|
471
|
+
</html>
|
|
457
472
|
|
|
458
|
-
|
|
473
|
+
```
|
|
459
474
|
|
|
460
|
-
|
|
475
|
+
**./test/mymc.ts**
|
|
476
|
+
```typescript
|
|
477
|
+
'use strict';
|
|
478
|
+
import { DC, LooseObject } from '../microcomponents.js';
|
|
461
479
|
|
|
462
|
-
|
|
480
|
+
export default class myMC extends DC {
|
|
481
|
+
constructor(target: HTMLElement) {
|
|
482
|
+
super(target);
|
|
483
|
+
delete this._mc; // not needed
|
|
484
|
+
}
|
|
463
485
|
|
|
464
|
-
|
|
486
|
+
oneInit() {
|
|
487
|
+
// console.log('testmc connected to DOM');
|
|
488
|
+
}
|
|
489
|
+
}
|
|
490
|
+
```
|
|
465
491
|
|
|
466
|
-
|
|
492
|
+
**./test/component.ts**
|
|
493
|
+
```typescript
|
|
494
|
+
'use strict';
|
|
495
|
+
import { DC, defineCE } from '.././microcomponents.js';
|
|
467
496
|
|
|
468
|
-
|
|
497
|
+
defineCE(
|
|
498
|
+
'test-component',
|
|
499
|
+
|
|
500
|
+
class extends DC {
|
|
501
|
+
data: unknown;
|
|
502
|
+
|
|
503
|
+
constructor(target: HTMLElement) {
|
|
504
|
+
super(target);
|
|
505
|
+
|
|
506
|
+
const that = this; // to help minification, you can use 'this' throughout the constructor as well
|
|
507
|
+
|
|
508
|
+
delete that._mc; // no inner classes needed
|
|
509
|
+
|
|
510
|
+
let shadow = (that as DC).target.attachShadow({ mode: 'open' });
|
|
511
|
+
shadow.innerHTML = `<style>${that.css}</style>${that.template}`;
|
|
512
|
+
|
|
513
|
+
}
|
|
514
|
+
|
|
515
|
+
get template() {
|
|
516
|
+
return /*html*/ `
|
|
517
|
+
<span>Hello World</span>
|
|
518
|
+
`;
|
|
519
|
+
}
|
|
520
|
+
|
|
521
|
+
get css() {
|
|
522
|
+
return /*css*/ `
|
|
523
|
+
div {
|
|
524
|
+
background-color: cyan;
|
|
525
|
+
}`;
|
|
526
|
+
}
|
|
527
|
+
}
|
|
528
|
+
);
|
|
529
|
+
```
|
|
530
|
+
|
|
531
|
+
**Page HTML after loading**
|
|
532
|
+
```HTML
|
|
533
|
+
(...)
|
|
534
|
+
<div _mc=""></div> <!--- _mc component definition now empty to avoid re-loading --->
|
|
535
|
+
<test-component></test-component> <!--- the custom element is initialized now --->
|
|
536
|
+
(...)
|
|
537
|
+
```
|
|
538
|
+
|
|
539
|
+
### Disabling:
|
|
540
|
+
|
|
541
|
+
- If you call **`autoload(false)`**, it disconnects the observer, stopping the automatic loading feature:
|
|
542
|
+
|
|
543
|
+
```typescript
|
|
544
|
+
autoload(false);
|
|
545
|
+
```
|
|
546
|
+
|
|
547
|
+
### Loading Mechanism:
|
|
548
|
+
|
|
549
|
+
When enabled and changes are detected in the DOM, the a callback function is triggered. This function scans the DOM for two types of components that might not yet be defined:
|
|
550
|
+
|
|
551
|
+
- **Undefined Custom Elements:** It looks for HTML elements whose tag names haven't been defined via customElements.define() (e.g., `<my-custom-tag>`).
|
|
552
|
+
|
|
553
|
+
For an element like `<my-custom-tag>`, it will attempt to load a script from a path derived from the tag name, such as **`./my/custom/tag.js`**. The loaded script is expected to then define this custom element.
|
|
554
|
+
|
|
555
|
+
- **Undefined Micro Components:** It looks for HTML elements that have an **`_mc`** attribute that is not empty, e.g., **`<div _mc="my-component my-other">`**.
|
|
556
|
+
|
|
557
|
+
**For each component name** listed in the **`_mc`** attribute (like **`my-component`**), it will attempt to load a script from a path like **`./my/component.js`**.
|
|
558
|
+
|
|
559
|
+
**These scripts are expected to `export default class {...}`** (usually extending DC from your code) that defines the behavior of this micro component.
|
|
560
|
+
|
|
561
|
+
**In general:**
|
|
562
|
+
|
|
563
|
+
- For each undefined component found, it dynamically creates a **`<script type="module">`** tag in the **`head`** of the document, and sets its src attribute to the appropriate path.
|
|
564
|
+
|
|
565
|
+
- The src of the script is determined by converting the component name (e.g., **`my-component`**) into a path (e.g., **`./my/component.js`**).
|
|
566
|
+
|
|
567
|
+
- These script tags are appended to the `<head>` of the document to initiate loading.
|
|
568
|
+
|
|
569
|
+
### Internal Callbacks and Instantiation:
|
|
570
|
+
|
|
571
|
+
- **Custom Elements:**
|
|
572
|
+
Once the script for a custom element loads and defines the element (using customElements.define()), the browser automatically handles upgrading any existing instances of that tag.
|
|
573
|
+
|
|
574
|
+
- **Micro Components:**
|
|
575
|
+
When a script for an _mc component loads successfully, a another callback is executed. This callback:
|
|
576
|
+
- Stores the loaded component class in an internal repository to avoid unnecessary reloading.
|
|
577
|
+
- Finds all HTMLElement in the DOM that declared this _mc component.
|
|
578
|
+
- Instantiates the component class and adds it to the HTMLElement.
|
|
579
|
+
- Removes the component's name from the _mc attribute to prevent re-processing.
|
|
580
|
+
|
|
581
|
+
### State Tracking:
|
|
582
|
+
|
|
583
|
+
`autoload()` internally uses two Map() objects:
|
|
584
|
+
|
|
585
|
+
- **`CEs`** (for Custom Elements that are currently loading)
|
|
586
|
+
- **`MCs`** (for Micro Components), to keep track of components that are currently loading or have been loaded. This prevents attempting to load the same component multiple times.
|
|
469
587
|
|
|
470
|
-
|
|
588
|
+
These maps are exposed for debugging purposes. You can access them via `autoload.state` which returns an object with `CEs` and `MCs` properties.
|
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+

|
|
2
|
+
|
|
3
|
+
# Custom Elements
|
|
2
4
|
|
|
3
5
|
Custom Elements provides two funktions:
|
|
4
6
|
- **defineCE()** lets you define a custom tag and add functionality to it. Internally it uses [Web Components](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry/define).
|
|
@@ -22,7 +24,7 @@ Before:
|
|
|
22
24
|
defineCE(
|
|
23
25
|
// equivalent to and internally using customElementRegistry.define()
|
|
24
26
|
"my-tag",
|
|
25
|
-
class
|
|
27
|
+
class extends DC {
|
|
26
28
|
|
|
27
29
|
constructor(target, data = {} ) {
|
|
28
30
|
super(target);
|
package/assets/test.html
CHANGED
package/dist/MC.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAevC,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA8CD,iBAAS,WAAW,CACnB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,EAClD,OAAO,GAAE,OAAe,EACxB,IAAI,GAAE,OAAe,QAarB;AAED,iBAAS,cAAc,CACtB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,QAGlD;AAmDD,iBAAS,OAAO,CACf,MAAM,EAAE,WAAW,EACnB,EAAE,EAAE,OAAO,GAAG,MAAM,EACpB,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAwBpB;AAiGD,cAAM,MAAM;;gBAGC,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAWnE,IAAI,MAAM,IAAI,GAAG,CAEhB;CACD;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,CAAC,EAAE,WAAW,CAAM;gBAEX,MAAM,CAAC,EAAE,GAAG;IAIxB,MAAM,CAAC,OAAO,iBAAW;IAEzB,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;CAmElE;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,CAAC,EAAE,WAAW,CAAM;gBAEX,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;IAI7D,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAYpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAMvC;
|
|
1
|
+
{"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../src/MC.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAC3C,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAevC,MAAM,WAAW,aAAc,SAAQ,WAAW;IACjD,GAAG,EAAE,WAAW,CAAC;CACjB;AA8CD,iBAAS,WAAW,CACnB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,EAClD,OAAO,GAAE,OAAe,EACxB,IAAI,GAAE,OAAe,QAarB;AAED,iBAAS,cAAc,CACtB,OAAO,EAAE,IAAI,EACb,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,kCAAkC,GAAG,IAAI,QAGlD;AAmDD,iBAAS,OAAO,CACf,MAAM,EAAE,WAAW,EACnB,EAAE,EAAE,OAAO,GAAG,MAAM,EACpB,IAAI,GAAE,GAAQ,EACd,MAAM,GAAE,MAAY,QAwBpB;AAiGD,cAAM,MAAM;;gBAGC,MAAM,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;KAAE,EAAE,KAAK,GAAE,OAAe;IAWnE,IAAI,MAAM,IAAI,GAAG,CAEhB;CACD;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,CAAC,EAAE,WAAW,CAAM;gBAEX,MAAM,CAAC,EAAE,GAAG;IAIxB,MAAM,CAAC,OAAO,iBAAW;IAEzB,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,GAAE,MAAY;CAmElE;AAED,cAAM,EAAG,SAAQ,MAAM;IACtB,GAAG,CAAC,EAAE,WAAW,CAAM;gBAEX,MAAM,EAAE,WAAW,EAAE,KAAK,GAAE,OAAe;IAIvD,MAAM,CAAC,GAAG,EAAE,QAAQ,CAAO;IAC3B,MAAM,CAAC,MAAM,EAAE,QAAQ,CAAU;IACjC,MAAM,CAAC,OAAO,EAAE,QAAQ,CAAW;IAEnC,OAAO,CAAC,EAAE,EAAE,OAAO,GAAG,MAAM,EAAE,IAAI,GAAE,GAAQ,EAAE,MAAM,CAAC,EAAE,MAAM;IAI7D,MAAM,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMlC,SAAS,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAMrC,QAAQ,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;IAYpC,WAAW,CAAC,MAAM,GAAE,MAAW,GAAG,GAAG,EAAE;CAMvC;AA6KD,wBAAgB,QAAQ,CAAC,MAAM,GAAE,OAAc,GAAG,OAAO,CAgBxD;AAID,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,MAAM,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC"}
|
package/dist/MC.min.js
CHANGED
|
@@ -428,20 +428,26 @@ function onLoadCallback(script) {
|
|
|
428
428
|
se.async = true;
|
|
429
429
|
se.setAttribute('type', 'module');
|
|
430
430
|
const code = `
|
|
431
|
-
import _ from "${importFileName}";
|
|
432
|
-
import {DC} from "./microcomponents.js";
|
|
433
431
|
|
|
434
|
-
|
|
432
|
+
import _ from "${importFileName}";
|
|
433
|
+
import {DC} from "./microcomponents.js";
|
|
435
434
|
|
|
436
|
-
elements.
|
|
437
|
-
|
|
438
|
-
|
|
439
|
-
|
|
440
|
-
});
|
|
435
|
+
const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
|
|
436
|
+
|
|
437
|
+
elements.forEach((element) => {
|
|
438
|
+
// add class to MCs repository
|
|
439
|
+
autoload.state.MCs.set( '${elementName}', _ );
|
|
440
|
+
// add instance to HTMLElement
|
|
441
|
+
DC.add(element, _.name, new _(element));
|
|
442
|
+
// remove instance name from elements "_mc" attribute
|
|
443
|
+
element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim());
|
|
444
|
+
});
|
|
445
|
+
|
|
446
|
+
setTimeout( () => {
|
|
447
|
+
document.body.querySelector('script[name="${elementName}]"')?.remove();
|
|
448
|
+
},0);
|
|
441
449
|
|
|
442
|
-
|
|
443
|
-
document.body.querySelector('script[name="${elementName}]"')?.remove();
|
|
444
|
-
},0);`;
|
|
450
|
+
`;
|
|
445
451
|
se.innerHTML = code;
|
|
446
452
|
document.body.append(se);
|
|
447
453
|
}, 0);
|
|
@@ -474,13 +480,12 @@ function loadUndefinedMicroComponents() {
|
|
|
474
480
|
const elementsAlreadyLoaded = elements.filter(m => MCs.has(m) && !MCs.get(m).length);
|
|
475
481
|
elementsAlreadyLoaded?.forEach(elementName => {
|
|
476
482
|
setTimeout(() => {
|
|
477
|
-
console.log('attaching', elementName, autoload.state.MCs.get(elementName));
|
|
478
483
|
DC.add(el, elementName, new (autoload.state.MCs.get(elementName))(el));
|
|
479
|
-
el.
|
|
480
|
-
.getAttribute('_mc')
|
|
484
|
+
const newAttribute = el.getAttribute('_mc')
|
|
481
485
|
.replace('${elementName}', '')
|
|
482
486
|
.replace(/\w\w/g, ' ')
|
|
483
|
-
.trim()
|
|
487
|
+
.trim() || '_mc';
|
|
488
|
+
el.setAttribute('_mc');
|
|
484
489
|
}, 5);
|
|
485
490
|
});
|
|
486
491
|
});
|
package/dist/MC.ts
CHANGED
|
@@ -489,20 +489,26 @@ function onLoadCallback( script: HTMLScriptElement ) {
|
|
|
489
489
|
|
|
490
490
|
// --- autoload script
|
|
491
491
|
const code = /*javascript*/`
|
|
492
|
-
import _ from "${importFileName}";
|
|
493
|
-
import {DC} from "./microcomponents.js";
|
|
494
492
|
|
|
495
|
-
|
|
493
|
+
import _ from "${importFileName}";
|
|
494
|
+
import {DC} from "./microcomponents.js";
|
|
496
495
|
|
|
497
|
-
elements.
|
|
498
|
-
autoload.state.MCs.set( '${elementName}', _ ); // add class to MCs repository
|
|
499
|
-
DC.add(element, _.name, new _(element)); // add instance to DOM
|
|
500
|
-
element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim()); // remove name from elements "_mc" attribute
|
|
501
|
-
});
|
|
496
|
+
const elements = Array.from(document.querySelectorAll('[_mc*="${elementName}"]')).filter( element => element instanceof HTMLElement );
|
|
502
497
|
|
|
503
|
-
|
|
504
|
-
|
|
505
|
-
},
|
|
498
|
+
elements.forEach((element) => {
|
|
499
|
+
// add class to MCs repository
|
|
500
|
+
autoload.state.MCs.set( '${elementName}', _ );
|
|
501
|
+
// add instance to HTMLElement
|
|
502
|
+
DC.add(element, _.name, new _(element));
|
|
503
|
+
// remove instance name from elements "_mc" attribute
|
|
504
|
+
element.setAttribute('_mc', element.getAttribute('_mc').replace('${elementName}', '').replace( /\w\w/g, ' ').trim());
|
|
505
|
+
});
|
|
506
|
+
|
|
507
|
+
setTimeout( () => {
|
|
508
|
+
document.body.querySelector('script[name="${elementName}]"')?.remove();
|
|
509
|
+
},0);
|
|
510
|
+
|
|
511
|
+
`;
|
|
506
512
|
// --- end autoload script
|
|
507
513
|
|
|
508
514
|
se.innerHTML = code;
|
|
@@ -558,14 +564,15 @@ function loadUndefinedMicroComponents() {
|
|
|
558
564
|
// MCs that are already loaded will trigger the onLoadCallback manually
|
|
559
565
|
elementsAlreadyLoaded?.forEach( elementName => {
|
|
560
566
|
setTimeout( ()=>{
|
|
561
|
-
console.log('attaching', elementName, (autoload as any).state.MCs.get(elementName));
|
|
567
|
+
//console.log('attaching', elementName, (autoload as any).state.MCs.get(elementName));
|
|
562
568
|
DC.add(el, elementName, new ( (autoload as any).state.MCs.get(elementName) as any)(el)); // add instance to DOM
|
|
563
|
-
|
|
564
|
-
|
|
569
|
+
|
|
570
|
+
const newAttribute = (el as any).getAttribute('_mc')
|
|
565
571
|
.replace('${elementName}', '')
|
|
566
572
|
.replace( /\w\w/g, ' ')
|
|
567
|
-
.trim()
|
|
568
|
-
|
|
573
|
+
.trim() || '_mc';
|
|
574
|
+
|
|
575
|
+
(el as any).setAttribute('_mc', ); // set new "_mc" attribute
|
|
569
576
|
}, 5);
|
|
570
577
|
});
|
|
571
578
|
});
|
package/dist/elements.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.elements=e():t.elements=e()}(this,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{defineCE:()=>j,getCE:()=>M});var n=new Function("try {return this===window;}catch(e){ return false;}");let r=new Set;n()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>r.add(t)));class o{#t;#e=!1;#n=!1;constructor(t,e={},n="l"){this.#t=t,this.data=e,this.bubble=n}get type(){return this.#t}get stopped(){return this.#e}get immediateStopped(){return this.#n}stopPropagation(){this.#e=!0}stopImmediatePropagation(){this.stopPropagation(),this.#n=!0}}var c=new Function("try {return this===window;}catch(e){ return false;}");let s=new Set;function i(t,e){let n=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const r=t?._mc;!e&&r?n=n.concat(Object.values(t._mc)):e&&r&&r[e]&&n.push(r[e])}})),n}function a(t,e,n=!0){let r=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&r.push(t._mc[e]):r=r.concat(Object.values(t._mc)),n))return r;t=t.parentNode}return r}function l(t){return t&&t instanceof HTMLElement}function u(t,e,n,r=!1,o=!1){let c={once:!1};r&&(c.capture=r),o&&(c.once=o),t.addEventListener(e,n,c)}function m(t,e,n={}){let r=t;if(!r._mc){let e=h?.debug;h.debug=!1,r._mc=new h(t),h.debug=e,delete r._mc._mc}const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("_mc")&&t.setAttribute("_mc","")),n}function d(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("_mc")&&t.removeAttribute("_mc")}function p(t,e,n={},r="l"){let c=t?._mc;if(!c)return;let s=e instanceof o?new o(e.type,e.data,"l"):new o(e,n,"l"),i="string"!=typeof e?e:new o(e,n,r);[...Object.values(c)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(s)})),/[ud]/.test(i.bubble)&&f(t,i)}function f(t,e){/[ud]/.test(e.bubble)&&setTimeout((()=>{if(-1===e.bubble.indexOf("l")&&(e.bubble+="l"),e.bubble.indexOf("u")>-1){let n=a(t,"",!0)?.[0].target;n&&h.trigger(n,e)}e.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&h.trigger(t,e)}))}),0)}c()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>s.add(t)));class g{#r;constructor(t,e=!1){var n;this.#r=new WeakRef(t||{}),(n=this).constructor!==h&&setTimeout((()=>{n.trigger("Init")}),0),function(t){if(!c()||t.constructor===h)return;const e=t.target;if(e instanceof HTMLElement){let n=t;Object.getOwnPropertyNames(n.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof n.constructor.prototype[t])).forEach((r=>{let o=/^one/.test(r),c=r.replace(/^on[e]{0,1}/,""),i=c.toLowerCase();o&&Object.defineProperty(t,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:t=>{n.constructor.prototype[r].bind(n)(t)}}),s.has("on"+i)&&u(e,i,(t=>{n.trigger(c,t)}),!1,o)}))}}(this)}get target(){return this.#r.deref()}}class b extends g{_mc={};constructor(t){super(t)}static trigger=p;trigger(t,e={},n="l"){let r=this;if(r.constructor===b||r.constructor===h){let c=t instanceof o?new o(t.type,t.data,"l"):new o(t,e,"l"),s="string"!=typeof t?t:new o(t,e,n);return[...Object.getOwnPropertyNames(r)].forEach((t=>{r[t]?.trigger&&"function"==typeof r[t]?.trigger&&r[t]?.trigger(c)})),void(/[ud]/.test(s.bubble)&&f(r.target,s))}if(r instanceof b||r instanceof h){const r=this,c="string"!=typeof t?t:new o(t,e,n),s="on"+c.type[0].toUpperCase()+c.type.slice(1);if(c.bubble.indexOf("l")>-1&&(c.immediateStopped||"function"!=typeof r[s]||(r[s](c),r.hasOwnProperty(s)&&delete r[s])),c.stopped||"l"===c.bubble)return r;/[ud]/.test(c.bubble)&&f(r.target,c)}}}class h extends g{_mc={};constructor(t,e=!1){super(t)}static add=m;static remove=d;static trigger=p;trigger(t,e={},n){b.prototype.trigger.call(this,t,e,n)}parent(t=""){let e=this.target;return l(e)?a(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return l(e)?a(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!l(e))return[];const n=Math.random().toString().replace(".",""),r='[_mc]:not([temp_id="'+n+'"] [_mc] [_mc])';e.setAttribute("temp_id",n);const o=i([...e.querySelectorAll(r)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return l(e)?i([...e.querySelectorAll("*[_mc]")],t):[]}}const y=new Map,w=new Map;function _(t){const e="./"+t.split("-").join("/")+".js",n=document.createElement("script");return n.setAttribute("src",e),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("name",t),n.setAttribute("loading",""),u(n,"load",(t=>{n.removeAttribute("loading"),n.setAttribute("loaded","")})),u(n,"error",(t=>{console.error("could not load Custom Element code from",e)})),n}function E(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!y.has(t.tagName.toLowerCase()))).forEach((t=>{const e=t.tagName.toLowerCase(),n=(e.split("-").join("/"),_(e));u(n,"load",(()=>{y.set(e,customElements.get(t.tagName.toLowerCase()))})),y.set(e,"loading"),document.head.append(n)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("_mc")?.split(" ").filter((t=>!!t))||[],n=e.filter((t=>!w.has(t)));n?.forEach((t=>{const e=_(t);u(e,"load",(()=>{return e=document.head.querySelector(`script[name="${t}"]`),void setTimeout((function(){const t=e.getAttribute("src"),n=e.getAttribute("name"),r=document.createElement("script");r.async=!0,r.setAttribute("type","module");const o=`\n\n\t\t\timport _ from "${t}";\n\t\t\timport {DC} from "./microcomponents.js";\n\n\t\t\tconst elements = Array.from(document.querySelectorAll('[_mc*="${n}"]')).filter( element => element instanceof HTMLElement );\n\n\t\t\telements.forEach((element) => {\n\t\t\t\t// add class to MCs repository\n\t\t\t\tautoload.state.MCs.set( '${n}', _ );\n\t\t\t\t// add instance to HTMLElement \n\t\t\t\tDC.add(element, _.name, new _(element));\n\t\t\t\t// remove instance name from elements "_mc" attribute\n\t\t\t\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${n}', '').replace( /ww/g, ' ').trim()); \n\t\t\t});\n\n\t\t\tsetTimeout( () => {\n\t\t\t\tdocument.body.querySelector('script[name="${n}]"')?.remove();\n\t\t\t},0);\n\n\t\t`;r.innerHTML=o,document.body.append(r)}),0);var e})),w.set(t,"loading"),document.head.append(e)}));const r=e.filter((t=>w.has(t)&&!w.get(t).length));r?.forEach((e=>{setTimeout((()=>{h.add(t,e,new(C.state.MCs.get(e))(t)),t.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim(),t.setAttribute("_mc")}),5)}))}))}let A=!1,v=null;function C(t=!0){return t?(A=t,v=new MutationObserver(E),setTimeout((()=>{v.observe(document.body,{childList:!0,subtree:!0}),E()}),5),A):(v?.disconnect(),v=null,A)}C.state={CEs:y,MCs:w};class O extends HTMLElement{constructor(){super()}connectedCallback(){h.trigger(this,"Connected")}disconnectedCallback(){h.trigger(this,"Disconnected")}adoptedCallback(){h.trigger(this,"Adopted")}attributeChangedCallback(t,e,n){h.trigger(this,"AttributeChanged",{name:t,oldValue:e,newValue:n})}}function j(t,e,n=[]){if(customElements.get(t))return void console.warn(`IGNORED: Custom element "${t}" is already defined!`);if(!t.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("");customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends O{instance;constructor(t){super();let n=new e(this,t);h.add(this,r,n)}static get observedAttributes(){return n}}))}function M(t){return customElements.get(t)}return e})()));
|
package/dist/formvValues.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.formValues=t():e.formValues=t()}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function r(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var o;(o=e[n])&&o.constructor&&o.constructor===Object?t[n]=r(e[n]):t[n]=e[n]})),t}function n(e,t=!0){let o={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const r=n(e[t],!1);for(const e in r)o[t+"."+e]=r[e]}else o[t]=e[t]})),t?r(o):o}function o(e,t){return JSON.stringify(n(e))===JSON.stringify(n(t))}function c(e,t){let r;return()=>{clearTimeout(r),r=setTimeout((function(){e(...arguments)}),t)}}function s(e,t){const r=Object.getOwnPropertyDescriptors(e);for(const[e,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(t,e,n)}e.r(t),e.d(t,{formValues:()=>J});var a=new Function("try {return this===window;}catch(e){ return false;}");let l=new Set;a()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>l.add(e)));class i{#e;#t=!1;#r=!1;constructor(e,t={},r="l"){this.#e=e,this.data=t,this.bubble=r}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#r}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#r=!0}}var u=new Function("try {return this===window;}catch(e){ return false;}");let f=new Set;function d(e,t){let r=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const n=e?._mc;!t&&n?r=r.concat(Object.values(e._mc)):t&&n&&n[t]&&r.push(n[t])}})),r}function m(e,t,r=!0){let n=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&n.push(e._mc[t]):n=n.concat(Object.values(e._mc)),r))return n;e=e.parentNode}return n}function p(e){return e&&e instanceof HTMLElement}function b(e,t,r,n=!1,o=!1){let c={once:!1};n&&(c.capture=n),o&&(c.once=o),e.addEventListener(t,r,c)}function g(e,t,r={}){let n=e;if(!n._mc){let t=E?.debug;E.debug=!1,n._mc=new E(e),E.debug=t,delete n._mc._mc}const o=n._mc;return t.length&&!o[t]&&(o[t]=r,e instanceof HTMLElement&&!e.getAttribute("_mc")&&e.setAttribute("_mc","")),r}function h(e,t){if(!t)return;const r=e?._mc||{};r&&r[t]&&delete r[t],!Object.keys(r).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function y(e,t,r={},n="l"){let o=e?._mc;if(!o)return;let c=t instanceof i?new i(t.type,t.data,"l"):new i(t,r,"l"),s="string"!=typeof t?t:new i(t,r,n);[...Object.values(o)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(c)})),/[ud]/.test(s.bubble)&&O(e,s)}function O(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let r=m(e,"",!0)?.[0].target;r&&E.trigger(r,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&E.trigger(e,t)}))}),0)}u()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>f.add(e)));class v{#n;constructor(e,t=!1){var r;this.#n=new WeakRef(e||{}),(r=this).constructor!==E&&setTimeout((()=>{r.trigger("Init")}),0),function(e){if(!u()||e.constructor===E)return;const t=e.target;if(t instanceof HTMLElement){let r=e;Object.getOwnPropertyNames(r.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof r.constructor.prototype[e])).forEach((n=>{let o=/^one/.test(n),c=n.replace(/^on[e]{0,1}/,""),s=c.toLowerCase();o&&Object.defineProperty(e,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:e=>{r.constructor.prototype[n].bind(r)(e)}}),f.has("on"+s)&&b(t,s,(e=>{r.trigger(c,e)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class w extends v{_mc={};constructor(e){super(e)}static trigger=y;trigger(e,t={},r="l"){let n=this;if(n.constructor===w||n.constructor===E){let o=e instanceof i?new i(e.type,e.data,"l"):new i(e,t,"l"),c="string"!=typeof e?e:new i(e,t,r);return[...Object.getOwnPropertyNames(n)].forEach((e=>{n[e]?.trigger&&"function"==typeof n[e]?.trigger&&n[e]?.trigger(o)})),void(/[ud]/.test(c.bubble)&&O(n.target,c))}if(n instanceof w||n instanceof E){const n=this,o="string"!=typeof e?e:new i(e,t,r),c="on"+o.type[0].toUpperCase()+o.type.slice(1);if(o.bubble.indexOf("l")>-1&&(o.immediateStopped||"function"!=typeof n[c]||(n[c](o),n.hasOwnProperty(c)&&delete n[c])),o.stopped||"l"===o.bubble)return n;/[ud]/.test(o.bubble)&&O(n.target,o)}}}class E extends v{_mc={};constructor(e,t=!1){super(e)}static add=g;static remove=h;static trigger=y;trigger(e,t={},r){w.prototype.trigger.call(this,e,t,r)}parent(e=""){let t=this.target;return p(t)?m(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return p(t)?m(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!p(t))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';t.setAttribute("temp_id",r);const o=d([...t.querySelectorAll(n)],e);return t.removeAttribute("temp_id"),o}descendants(e=""){let t=this?.target;return p(t)?d([...t.querySelectorAll("*[_mc]")],e):[]}}const A=new Map,_=new Map;function j(e){const t="./"+e.split("-").join("/")+".js",r=document.createElement("script");return r.setAttribute("src",t),r.setAttribute("blocking","render"),r.async=!0,r.setAttribute("type","module"),r.setAttribute("name",e),r.setAttribute("loading",""),b(r,"load",(e=>{r.removeAttribute("loading"),r.setAttribute("loaded","")})),b(r,"error",(e=>{console.error("could not load Custom Element code from",t)})),r}function S(){[...document.querySelectorAll(":not(:defined)")].filter((e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!A.has(e.tagName.toLowerCase()))).forEach((e=>{const t=e.tagName.toLowerCase(),r=(t.split("-").join("/"),j(t));b(r,"load",(()=>{A.set(t,customElements.get(e.tagName.toLowerCase()))})),A.set(t,"loading"),document.head.append(r)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((e=>!!e)).forEach((e=>{const t=e.getAttribute("_mc")?.split(" ").filter((e=>!!e))||[],r=t.filter((e=>!_.has(e)));r?.forEach((e=>{const t=j(e);b(t,"load",(()=>{return t=document.head.querySelector(`script[name="${e}"]`),void setTimeout((function(){const e=t.getAttribute("src"),r=t.getAttribute("name"),n=document.createElement("script");n.async=!0,n.setAttribute("type","module");const o=`\nimport _ from "${e}";\nimport {DC} from "./microcomponents.js";\n\nconst elements = Array.from(document.querySelectorAll('[_mc*="${r}"]')).filter( element => element instanceof HTMLElement );\n\nelements.forEach((element) => {\n\tautoload.state.MCs.set( '${r}', _ ); // add class to MCs repository\n\tDC.add(element, _.name, new _(element)); // add instance to DOM\n\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${r}', '').replace( /ww/g, ' ').trim()); // remove name from elements "_mc" attribute\n});\n\nsetTimeout( () => {\n\tdocument.body.querySelector('script[name="${r}]"')?.remove();\n},0);`;n.innerHTML=o,document.body.append(n)}),0);var t})),_.set(e,"loading"),document.head.append(t)}));const n=t.filter((e=>_.has(e)&&!_.get(e).length));n?.forEach((t=>{setTimeout((()=>{console.log("attaching",t,N.state.MCs.get(t)),E.add(e,t,new(N.state.MCs.get(t))(e)),e.setAttribute("_mc",e.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim())}),5)}))}))}let T=!1,k=null;function N(e=!0){return e?(T=e,k=new MutationObserver(S),setTimeout((()=>{k.observe(document.body,{childList:!0,subtree:!0}),S()}),5),T):(k?.disconnect(),k=null,T)}function C(e){return null!=e&&"object"==typeof e}function M(e){let t=new Set,r=/\{[^\{\}]*\}/g;return e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(r))).forEach((n=>{new Set(e.getAttribute(n)?.match(r)).forEach((e=>t.add(e.replace(/[\{\}]/g,""))))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(r))).forEach((e=>{(e.nodeValue||"").match(r).forEach((e=>{t.add(e.replace(/[\{\}]/g,""))}))})),[...t].map((e=>e.replace(/[\{\}]/g,"")))}N.state={CEs:A,MCs:_};const L=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class x extends E{data={};oldDisplay="";constructor(e){super(e);let t=this;M(e).forEach((e=>t.data[e]="")),P(t),t.#o(),delete t._mc}#o(){let e=this,t=e.target,r=!1;t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((r=>{let n=new Set(t.getAttribute(r)?.match(/\{[^\{\}]*\}/g));var o;e.data.observe((o=t.getAttribute(r),e=>{let c=o;n.forEach((t=>{c=c.replace(t,e[t.replace(/[\{\}]/g,"")])})),t.setAttribute(r,c)}))})),[...t.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{r=!0;let o=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));var c;e.data.observe((c=n.nodeValue,r=>{let s=c;o.forEach((e=>{s=s.replace(e,r[e.replace(/[\{\}]/g,"")])})),Object.keys(r).some((e=>!!r[e]))&&(e.oldDisplay?t.style=e.oldDisplay:t.removeAttribute("style"),delete e.oldDisplay),n.nodeValue=s})),e.oldDisplay=t.getAttribute("style)")||"",r&&!L.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(e){let t=this,r={};Object.keys(e.data).forEach((n=>{t.data.hasOwnProperty(n)&&(r[n]=e.data[n])})),JSON.stringify(r)!==JSON.stringify(t.data)&&Object.assign(t.data,r)}}const P=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if("_"===t[0]||void 0===e?.[t])return e;let r,a=e[t];if(!a.prototype)switch(typeof a){case"string":r=String;break;case"number":r=Number;break;case"boolean":r=Boolean;break;case"object":r=a instanceof Array?Array:Object;break;default:return}let l=class extends r{#c=!0;constructor(e){super(e),this.constructor.callbacks=[],C(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}observe(e){return this.constructor.callbacks.push(e),this}bind(e){const t=this;if(C(t.valueOf())){!function(e){var t;(t=e,(t instanceof HTMLElement?[t]:[]).concat([...t.querySelectorAll("*")]).filter((e=>!!M(e).length)).filter((e=>"STYLE"!==e.tagName))).forEach((e=>{e?._mc?._placeholders||E.add(e,"_placeholders",new x(e))}))}(e);const r=[...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),o=function(e){let t=n(e);r.forEach((e=>{e&&e._mc.trigger("data",t)}))};t.constructor.callbacks.push(o),t.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof t.valueOf(),t);return this}notify(e){let t=this,r=C(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return void 0!==e&&(t.#c=e),t.constructor.callbacks.forEach((e=>{e(r)})),t}},i=new l(a);Object.defineProperty(e,t,{enumerable:!0,get(){if(C(i.valueOf())){let e=structuredClone(Object.assign({},i));setTimeout(c((function(){o(structuredClone(Object.assign({},i)),e)||i.notify()}),0),0)}return i},set(e){if(typeof e==typeof i.valueOf())if(C(i.valueOf())&&i.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},i));i instanceof l==0&&(i=new l(structuredClone(Object.assign({},e))),s(e,i),i.seal()),Object.assign(i,e),setTimeout(c((function(){o(structuredClone(Object.assign({},i)),t)||i.notify()}),0),0)}else{let t=i.valueOf(),r=i.constructor.callbacks;i=new l(e),i.constructor.callbacks=r,e!==t&&i.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof i.valueOf(),i,"- CANNOT BECOME:",typeof e)}}),e[t]=a})),e);class q{constructor(e){}}class D extends q{#s;constructor(e){super(e),this.#s=e}get val(){return new FormData(this.#s.form).get(this.#s.name)}set val(e){[...this.#s.form.querySelectorAll(`input[type="radio"][name="${this.#s.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class H extends q{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.checked}set val(e){this.#s.checked=e}}class V extends q{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.value}set val(e){this.#s.value=e}}class I extends q{#s;#a=!1;constructor(e){super(e),this.#s=e,this.#a=e.multiple}get val(){const e=[];return[...this.#s.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{e.push(t.value)})),this.#a?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#s.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1}))}}class $ extends q{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.value||""}set val(e){this.#s.value=e}}const F=e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],r={};return t.forEach((e=>{const t=e.getAttribute("name");if(t){let n=!1;switch((e=>e.tagName.toLowerCase())(e)){case"input":switch(e.type){case"radio":n=new D(e);break;case"checkbox":n=new H(e);break;default:n=new V(e)}break;case"select":n=new I(e);break;case"textarea":n=new $(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}n&&(E.add(e,t,n),Object.defineProperty(r,t,{enumerable:!0,configurable:!0,get:()=>n.val,set:e=>{n.val!==e&&(n.val=e)}}))}})),r};function J(e,t,r){let n=F(r);e[t]=Object.assign({},n),P(e,t),s(n,e[t]),[...r.querySelectorAll("input, textarea, select")].forEach((r=>{b(r,"keyup",(r=>{e[t].notify()})),b(r,"change",(r=>{e[t].notify()})),b(r,"select",(r=>{e[t].notify()}))}))}return t})()));
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.formValues=t():e.formValues=t()}(this,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var n in r)e.o(r,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:r[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t),r:e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})}},t={};function r(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var o;(o=e[n])&&o.constructor&&o.constructor===Object?t[n]=r(e[n]):t[n]=e[n]})),t}function n(e,t=!0){let o={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const r=n(e[t],!1);for(const e in r)o[t+"."+e]=r[e]}else o[t]=e[t]})),t?r(o):o}function o(e,t){return JSON.stringify(n(e))===JSON.stringify(n(t))}function c(e,t){let r;return()=>{clearTimeout(r),r=setTimeout((function(){e(...arguments)}),t)}}function s(e,t){const r=Object.getOwnPropertyDescriptors(e);for(const[e,n]of Object.entries(r))("get"in n||"set"in n)&&Object.defineProperty(t,e,n)}e.r(t),e.d(t,{formValues:()=>J});var a=new Function("try {return this===window;}catch(e){ return false;}");let i=new Set;a()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>i.add(e)));class l{#e;#t=!1;#r=!1;constructor(e,t={},r="l"){this.#e=e,this.data=t,this.bubble=r}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#r}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#r=!0}}var u=new Function("try {return this===window;}catch(e){ return false;}");let f=new Set;function d(e,t){let r=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const n=e?._mc;!t&&n?r=r.concat(Object.values(e._mc)):t&&n&&n[t]&&r.push(n[t])}})),r}function m(e,t,r=!0){let n=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&n.push(e._mc[t]):n=n.concat(Object.values(e._mc)),r))return n;e=e.parentNode}return n}function p(e){return e&&e instanceof HTMLElement}function b(e,t,r,n=!1,o=!1){let c={once:!1};n&&(c.capture=n),o&&(c.once=o),e.addEventListener(t,r,c)}function g(e,t,r={}){let n=e;if(!n._mc){let t=E?.debug;E.debug=!1,n._mc=new E(e),E.debug=t,delete n._mc._mc}const o=n._mc;return t.length&&!o[t]&&(o[t]=r,e instanceof HTMLElement&&!e.getAttribute("_mc")&&e.setAttribute("_mc","")),r}function h(e,t){if(!t)return;const r=e?._mc||{};r&&r[t]&&delete r[t],!Object.keys(r).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function y(e,t,r={},n="l"){let o=e?._mc;if(!o)return;let c=t instanceof l?new l(t.type,t.data,"l"):new l(t,r,"l"),s="string"!=typeof t?t:new l(t,r,n);[...Object.values(o)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(c)})),/[ud]/.test(s.bubble)&&O(e,s)}function O(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let r=m(e,"",!0)?.[0].target;r&&E.trigger(r,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&E.trigger(e,t)}))}),0)}u()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>f.add(e)));class v{#n;constructor(e,t=!1){var r;this.#n=new WeakRef(e||{}),(r=this).constructor!==E&&setTimeout((()=>{r.trigger("Init")}),0),function(e){if(!u()||e.constructor===E)return;const t=e.target;if(t instanceof HTMLElement){let r=e;Object.getOwnPropertyNames(r.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof r.constructor.prototype[e])).forEach((n=>{let o=/^one/.test(n),c=n.replace(/^on[e]{0,1}/,""),s=c.toLowerCase();o&&Object.defineProperty(e,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:e=>{r.constructor.prototype[n].bind(r)(e)}}),f.has("on"+s)&&b(t,s,(e=>{r.trigger(c,e)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class w extends v{_mc={};constructor(e){super(e)}static trigger=y;trigger(e,t={},r="l"){let n=this;if(n.constructor===w||n.constructor===E){let o=e instanceof l?new l(e.type,e.data,"l"):new l(e,t,"l"),c="string"!=typeof e?e:new l(e,t,r);return[...Object.getOwnPropertyNames(n)].forEach((e=>{n[e]?.trigger&&"function"==typeof n[e]?.trigger&&n[e]?.trigger(o)})),void(/[ud]/.test(c.bubble)&&O(n.target,c))}if(n instanceof w||n instanceof E){const n=this,o="string"!=typeof e?e:new l(e,t,r),c="on"+o.type[0].toUpperCase()+o.type.slice(1);if(o.bubble.indexOf("l")>-1&&(o.immediateStopped||"function"!=typeof n[c]||(n[c](o),n.hasOwnProperty(c)&&delete n[c])),o.stopped||"l"===o.bubble)return n;/[ud]/.test(o.bubble)&&O(n.target,o)}}}class E extends v{_mc={};constructor(e,t=!1){super(e)}static add=g;static remove=h;static trigger=y;trigger(e,t={},r){w.prototype.trigger.call(this,e,t,r)}parent(e=""){let t=this.target;return p(t)?m(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return p(t)?m(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!p(t))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';t.setAttribute("temp_id",r);const o=d([...t.querySelectorAll(n)],e);return t.removeAttribute("temp_id"),o}descendants(e=""){let t=this?.target;return p(t)?d([...t.querySelectorAll("*[_mc]")],e):[]}}const A=new Map,_=new Map;function j(e){const t="./"+e.split("-").join("/")+".js",r=document.createElement("script");return r.setAttribute("src",t),r.setAttribute("blocking","render"),r.async=!0,r.setAttribute("type","module"),r.setAttribute("name",e),r.setAttribute("loading",""),b(r,"load",(e=>{r.removeAttribute("loading"),r.setAttribute("loaded","")})),b(r,"error",(e=>{console.error("could not load Custom Element code from",t)})),r}function S(){[...document.querySelectorAll(":not(:defined)")].filter((e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!A.has(e.tagName.toLowerCase()))).forEach((e=>{const t=e.tagName.toLowerCase(),r=(t.split("-").join("/"),j(t));b(r,"load",(()=>{A.set(t,customElements.get(e.tagName.toLowerCase()))})),A.set(t,"loading"),document.head.append(r)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((e=>!!e)).forEach((e=>{const t=e.getAttribute("_mc")?.split(" ").filter((e=>!!e))||[],r=t.filter((e=>!_.has(e)));r?.forEach((e=>{const t=j(e);b(t,"load",(()=>{return t=document.head.querySelector(`script[name="${e}"]`),void setTimeout((function(){const e=t.getAttribute("src"),r=t.getAttribute("name"),n=document.createElement("script");n.async=!0,n.setAttribute("type","module");const o=`\n\n\t\t\timport _ from "${e}";\n\t\t\timport {DC} from "./microcomponents.js";\n\n\t\t\tconst elements = Array.from(document.querySelectorAll('[_mc*="${r}"]')).filter( element => element instanceof HTMLElement );\n\n\t\t\telements.forEach((element) => {\n\t\t\t\t// add class to MCs repository\n\t\t\t\tautoload.state.MCs.set( '${r}', _ );\n\t\t\t\t// add instance to HTMLElement \n\t\t\t\tDC.add(element, _.name, new _(element));\n\t\t\t\t// remove instance name from elements "_mc" attribute\n\t\t\t\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${r}', '').replace( /ww/g, ' ').trim()); \n\t\t\t});\n\n\t\t\tsetTimeout( () => {\n\t\t\t\tdocument.body.querySelector('script[name="${r}]"')?.remove();\n\t\t\t},0);\n\n\t\t`;n.innerHTML=o,document.body.append(n)}),0);var t})),_.set(e,"loading"),document.head.append(t)}));const n=t.filter((e=>_.has(e)&&!_.get(e).length));n?.forEach((t=>{setTimeout((()=>{E.add(e,t,new(N.state.MCs.get(t))(e)),e.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim(),e.setAttribute("_mc")}),5)}))}))}let T=!1,k=null;function N(e=!0){return e?(T=e,k=new MutationObserver(S),setTimeout((()=>{k.observe(document.body,{childList:!0,subtree:!0}),S()}),5),T):(k?.disconnect(),k=null,T)}function C(e){return null!=e&&"object"==typeof e}function L(e){let t=new Set,r=/\{[^\{\}]*\}/g;return e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(r))).forEach((n=>{new Set(e.getAttribute(n)?.match(r)).forEach((e=>t.add(e.replace(/[\{\}]/g,""))))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(r))).forEach((e=>{(e.nodeValue||"").match(r).forEach((e=>{t.add(e.replace(/[\{\}]/g,""))}))})),[...t].map((e=>e.replace(/[\{\}]/g,"")))}N.state={CEs:A,MCs:_};const M=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class x extends E{data={};oldDisplay="";constructor(e){super(e);let t=this;L(e).forEach((e=>t.data[e]="")),P(t),t.#o(),delete t._mc}#o(){let e=this,t=e.target,r=!1;t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((r=>{let n=new Set(t.getAttribute(r)?.match(/\{[^\{\}]*\}/g));var o;e.data.observe((o=t.getAttribute(r),e=>{let c=o;n.forEach((t=>{c=c.replace(t,e[t.replace(/[\{\}]/g,"")])})),t.setAttribute(r,c)}))})),[...t.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((n=>{r=!0;let o=new Set(n.nodeValue.match(/\{[^\{\}]*\}/g));var c;e.data.observe((c=n.nodeValue,r=>{let s=c;o.forEach((e=>{s=s.replace(e,r[e.replace(/[\{\}]/g,"")])})),Object.keys(r).some((e=>!!r[e]))&&(e.oldDisplay?t.style=e.oldDisplay:t.removeAttribute("style"),delete e.oldDisplay),n.nodeValue=s})),e.oldDisplay=t.getAttribute("style)")||"",r&&!M.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(e){let t=this,r={};Object.keys(e.data).forEach((n=>{t.data.hasOwnProperty(n)&&(r[n]=e.data[n])})),JSON.stringify(r)!==JSON.stringify(t.data)&&Object.assign(t.data,r)}}const P=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if("_"===t[0]||void 0===e?.[t])return e;let r,a=e[t];if(!a.prototype)switch(typeof a){case"string":r=String;break;case"number":r=Number;break;case"boolean":r=Boolean;break;case"object":r=a instanceof Array?Array:Object;break;default:return}let i=class extends r{#c=!0;constructor(e){super(e),this.constructor.callbacks=[],C(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}observe(e){return this.constructor.callbacks.push(e),this}bind(e){const t=this;if(C(t.valueOf())){!function(e){var t;(t=e,(t instanceof HTMLElement?[t]:[]).concat([...t.querySelectorAll("*")]).filter((e=>!!L(e).length)).filter((e=>"STYLE"!==e.tagName))).forEach((e=>{e?._mc?._placeholders||E.add(e,"_placeholders",new x(e))}))}(e);const r=[...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),o=function(e){let t=n(e);r.forEach((e=>{e&&e._mc.trigger("data",t)}))};t.constructor.callbacks.push(o),t.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof t.valueOf(),t);return this}notify(e){let t=this,r=C(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return void 0!==e&&(t.#c=e),t.constructor.callbacks.forEach((e=>{e(r)})),t}},l=new i(a);Object.defineProperty(e,t,{enumerable:!0,get(){if(C(l.valueOf())){let e=structuredClone(Object.assign({},l));setTimeout(c((function(){o(structuredClone(Object.assign({},l)),e)||l.notify()}),0),0)}return l},set(e){if(typeof e==typeof l.valueOf())if(C(l.valueOf())&&l.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},l));l instanceof i==0&&(l=new i(structuredClone(Object.assign({},e))),s(e,l),l.seal()),Object.assign(l,e),setTimeout(c((function(){o(structuredClone(Object.assign({},l)),t)||l.notify()}),0),0)}else{let t=l.valueOf(),r=l.constructor.callbacks;l=new i(e),l.constructor.callbacks=r,e!==t&&l.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof l.valueOf(),l,"- CANNOT BECOME:",typeof e)}}),e[t]=a})),e);class q{constructor(e){}}class H extends q{#s;constructor(e){super(e),this.#s=e}get val(){return new FormData(this.#s.form).get(this.#s.name)}set val(e){[...this.#s.form.querySelectorAll(`input[type="radio"][name="${this.#s.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class D extends q{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.checked}set val(e){this.#s.checked=e}}class V extends q{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.value}set val(e){this.#s.value=e}}class I extends q{#s;#a=!1;constructor(e){super(e),this.#s=e,this.#a=e.multiple}get val(){const e=[];return[...this.#s.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{e.push(t.value)})),this.#a?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#s.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1}))}}class $ extends q{#s;constructor(e){super(e),this.#s=e}get val(){return this.#s.value||""}set val(e){this.#s.value=e}}const F=e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],r={};return t.forEach((e=>{const t=e.getAttribute("name");if(t){let n=!1;switch((e=>e.tagName.toLowerCase())(e)){case"input":switch(e.type){case"radio":n=new H(e);break;case"checkbox":n=new D(e);break;default:n=new V(e)}break;case"select":n=new I(e);break;case"textarea":n=new $(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}n&&(E.add(e,t,n),Object.defineProperty(r,t,{enumerable:!0,configurable:!0,get:()=>n.val,set:e=>{n.val!==e&&(n.val=e)}}))}})),r};function J(e,t,r){let n=F(r);e[t]=Object.assign({},n),P(e,t),s(n,e[t]),[...r.querySelectorAll("input, textarea, select")].forEach((r=>{b(r,"keyup",(r=>{e[t].notify()})),b(r,"change",(r=>{e[t].notify()})),b(r,"select",(r=>{e[t].notify()}))}))}return t})()));
|