@twobirds/microcomponents 0.0.64 → 0.0.65
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 +136 -12
- package/package.json +1 -1
- package/public/documentation/MC.md +136 -12
- package/public/test/grandparent.js +1 -15
- package/public/test/testform.js +1 -141
- package/webpack.config.js +2 -2
package/.vscode/settings.json
CHANGED
|
@@ -19,7 +19,7 @@ The framework exports 2 main classes:
|
|
|
19
19
|
- [DOM Traversal](#dom-traversal)
|
|
20
20
|
- [Autoloading Concept](#autoloading-concept)
|
|
21
21
|
- [Important Rule](#important-rule)
|
|
22
|
-
- [
|
|
22
|
+
- [Classes](#classes)
|
|
23
23
|
- [Not Exported: `McBase` (Superclass)](#not-exported-mcbase-superclass)
|
|
24
24
|
- [Exported: `MC` Class](#exported-mc-class)
|
|
25
25
|
- [Exported: `DC` Class](#exported-dc-class)
|
|
@@ -50,13 +50,11 @@ The framework exports 2 main classes:
|
|
|
50
50
|
- [`init(...)`](#init-helper)
|
|
51
51
|
- [`autoAttachListeners(...)`](#autoattachlisteners)
|
|
52
52
|
- [`bubbleEvent(...)`](#bubbleevent)
|
|
53
|
-
- [Autoloading Implementation](#autoloading-implementation)
|
|
54
|
-
- [`autoload(enable?)`](#autoload)
|
|
55
|
-
- [`loadit()`](#loadit)
|
|
56
53
|
- [Interfaces and Types](#interfaces-and-types)
|
|
57
54
|
- [`LooseObject`](#looseobject)
|
|
58
55
|
- [`McEvent`](#mcevent)
|
|
59
56
|
- [`HTMLMcElement`](#htmlmcelement)
|
|
57
|
+
- [Autoloading](#auto-loading)
|
|
60
58
|
|
|
61
59
|
## Usage Guidance
|
|
62
60
|
|
|
@@ -122,7 +120,7 @@ An optional feature (`autoload()`) that automatically detects specific HTML tags
|
|
|
122
120
|
|
|
123
121
|
**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
122
|
|
|
125
|
-
##
|
|
123
|
+
## Classes
|
|
126
124
|
|
|
127
125
|
### Not Exported: `McBase` (Superclass)
|
|
128
126
|
|
|
@@ -454,17 +452,143 @@ class MyLifecycleComponent extends DC {
|
|
|
454
452
|
}
|
|
455
453
|
}
|
|
456
454
|
```
|
|
455
|
+
## Auto Loading
|
|
456
|
+
|
|
457
|
+
`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.
|
|
458
|
+
|
|
459
|
+
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.
|
|
460
|
+
|
|
461
|
+
### Enabling/Disabling:
|
|
462
|
+
|
|
463
|
+
- If you call **`autoload(true)`** (or just **`autoload()`** as true is the parameter default), it initializes a MutationObserver.
|
|
464
|
+
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).
|
|
465
|
+
|
|
466
|
+
**./autoload.html**
|
|
467
|
+
```HTML
|
|
468
|
+
<!DOCTYPE html>
|
|
469
|
+
<html lang="en">
|
|
470
|
+
<head>
|
|
471
|
+
<meta charset="UTF-8" />
|
|
472
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
473
|
+
<title>Humble Beginnings</title>
|
|
474
|
+
<script src="./microcomponents.min.js"></script>
|
|
475
|
+
<script>
|
|
476
|
+
Object.assign(window, microcomponents); // make system global
|
|
477
|
+
autoload(true); // automatically load web components that are undefined
|
|
478
|
+
</script>
|
|
479
|
+
</head>
|
|
480
|
+
<body>
|
|
481
|
+
<div _mc="test-mymc"></div> <!--- example of a auto-loading micro component --->
|
|
482
|
+
<test-component></test-component> <!--- example of a auto-loading custom element --->
|
|
483
|
+
</body>
|
|
484
|
+
</html>
|
|
457
485
|
|
|
458
|
-
|
|
486
|
+
```
|
|
459
487
|
|
|
460
|
-
|
|
488
|
+
**./test/testmc.ts**
|
|
489
|
+
```typescript
|
|
490
|
+
'use strict';
|
|
491
|
+
import { DC, LooseObject } from '../microcomponents.js';
|
|
461
492
|
|
|
462
|
-
|
|
493
|
+
export default class extends DC {
|
|
494
|
+
constructor(target: HTMLElement) {
|
|
495
|
+
super(target);
|
|
496
|
+
delete this._mc; // not needed
|
|
497
|
+
}
|
|
463
498
|
|
|
464
|
-
|
|
499
|
+
oneInit() {
|
|
500
|
+
// console.log('testmc connected to DOM');
|
|
501
|
+
}
|
|
502
|
+
}
|
|
503
|
+
```
|
|
465
504
|
|
|
466
|
-
|
|
505
|
+
**./test/component.ts**
|
|
506
|
+
```typescript
|
|
507
|
+
'use strict';
|
|
508
|
+
import { DC, defineCE } from '.././microcomponents.js';
|
|
467
509
|
|
|
468
|
-
|
|
510
|
+
defineCE(
|
|
511
|
+
'test-mycomponent',
|
|
512
|
+
|
|
513
|
+
class extends DC {
|
|
514
|
+
data: unknown;
|
|
515
|
+
|
|
516
|
+
constructor(target: HTMLElement) {
|
|
517
|
+
super(target);
|
|
518
|
+
|
|
519
|
+
const that = this; // to help minification, you can use 'this' throughout the constructor as well
|
|
520
|
+
|
|
521
|
+
delete that._mc; // no inner classes needed
|
|
522
|
+
|
|
523
|
+
let shadow = (that as DC).target.attachShadow({ mode: 'open' });
|
|
524
|
+
shadow.innerHTML = `<style>${that.css}</style>${that.template}`;
|
|
525
|
+
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
get template() {
|
|
529
|
+
return /*html*/ `
|
|
530
|
+
<span>Hello World</span>
|
|
531
|
+
`;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
get css() {
|
|
535
|
+
return /*css*/ `
|
|
536
|
+
div {
|
|
537
|
+
background-color: cyan;
|
|
538
|
+
}`;
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
);
|
|
542
|
+
```
|
|
543
|
+
|
|
544
|
+
**Page HTML after loading**
|
|
545
|
+
```HTML
|
|
546
|
+
(...)
|
|
547
|
+
<div _mc=""></div> <!--- _mc component definition now empty to avoid re-loading --->
|
|
548
|
+
<test-component></test-component> <!--- the custom element is initialized now --->
|
|
549
|
+
(...)
|
|
550
|
+
```
|
|
551
|
+
|
|
552
|
+
|
|
553
|
+
- If you call **`autoload(false)`**, it disconnects the observer, stopping the automatic loading feature.
|
|
554
|
+
|
|
555
|
+
|
|
556
|
+
#### Loading Mechanism:
|
|
557
|
+
|
|
558
|
+
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:
|
|
559
|
+
|
|
560
|
+
- **Undefined Custom Elements:** It looks for HTML elements whose tag names haven't been defined via customElements.define() (e.g., `<my-custom-tag>`).
|
|
561
|
+
|
|
562
|
+
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.
|
|
563
|
+
|
|
564
|
+
- **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">`**.
|
|
565
|
+
|
|
566
|
+
**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`**.
|
|
567
|
+
|
|
568
|
+
**These scripts are expected to `export default class {...}`** (usually extending DC from your code) that defines the behavior of this micro component.
|
|
569
|
+
|
|
570
|
+
**In general:**
|
|
571
|
+
|
|
572
|
+
- 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.
|
|
573
|
+
|
|
574
|
+
- The src of the script is determined by converting the component name (e.g., **`my-component`**) into a path (e.g., **`./my/component.js`**).
|
|
575
|
+
|
|
576
|
+
- These script tags are appended to the <head> of the document to initiate loading.
|
|
577
|
+
|
|
578
|
+
#### Internal Callbacks and Instantiation:
|
|
579
|
+
|
|
580
|
+
- Custom Elements: 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.
|
|
581
|
+
- Micro Components (_mc): When a script for an _mc component loads successfully, a another callback is executed. This callback:
|
|
582
|
+
- Stores the loaded component class in an internal repository to avoid unnecessary reloading.
|
|
583
|
+
- Finds all HTMLElement in the DOM that declared this _mc component.
|
|
584
|
+
- Instantiates the component class and adds it to the HTMLElement.
|
|
585
|
+
- Removes the component's name from the _mc attribute to prevent re-processing.
|
|
586
|
+
|
|
587
|
+
#### State Tracking:
|
|
588
|
+
|
|
589
|
+
`autoload()` internally uses two Map() objects:
|
|
590
|
+
|
|
591
|
+
- **`CEs`** (for Custom Elements that are currently loading)
|
|
592
|
+
- **`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
593
|
|
|
470
|
-
|
|
594
|
+
These maps are exposed for debugging purposes. You can access them via `autoload.state` which returns an object with `CEs` and `MCs` properties.
|
package/package.json
CHANGED
|
@@ -19,7 +19,7 @@ The framework exports 2 main classes:
|
|
|
19
19
|
- [DOM Traversal](#dom-traversal)
|
|
20
20
|
- [Autoloading Concept](#autoloading-concept)
|
|
21
21
|
- [Important Rule](#important-rule)
|
|
22
|
-
- [
|
|
22
|
+
- [Classes](#classes)
|
|
23
23
|
- [Not Exported: `McBase` (Superclass)](#not-exported-mcbase-superclass)
|
|
24
24
|
- [Exported: `MC` Class](#exported-mc-class)
|
|
25
25
|
- [Exported: `DC` Class](#exported-dc-class)
|
|
@@ -50,13 +50,11 @@ The framework exports 2 main classes:
|
|
|
50
50
|
- [`init(...)`](#init-helper)
|
|
51
51
|
- [`autoAttachListeners(...)`](#autoattachlisteners)
|
|
52
52
|
- [`bubbleEvent(...)`](#bubbleevent)
|
|
53
|
-
- [Autoloading Implementation](#autoloading-implementation)
|
|
54
|
-
- [`autoload(enable?)`](#autoload)
|
|
55
|
-
- [`loadit()`](#loadit)
|
|
56
53
|
- [Interfaces and Types](#interfaces-and-types)
|
|
57
54
|
- [`LooseObject`](#looseobject)
|
|
58
55
|
- [`McEvent`](#mcevent)
|
|
59
56
|
- [`HTMLMcElement`](#htmlmcelement)
|
|
57
|
+
- [Autoloading](#auto-loading)
|
|
60
58
|
|
|
61
59
|
## Usage Guidance
|
|
62
60
|
|
|
@@ -122,7 +120,7 @@ An optional feature (`autoload()`) that automatically detects specific HTML tags
|
|
|
122
120
|
|
|
123
121
|
**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
122
|
|
|
125
|
-
##
|
|
123
|
+
## Classes
|
|
126
124
|
|
|
127
125
|
### Not Exported: `McBase` (Superclass)
|
|
128
126
|
|
|
@@ -454,17 +452,143 @@ class MyLifecycleComponent extends DC {
|
|
|
454
452
|
}
|
|
455
453
|
}
|
|
456
454
|
```
|
|
455
|
+
## Auto Loading
|
|
456
|
+
|
|
457
|
+
`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.
|
|
458
|
+
|
|
459
|
+
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.
|
|
460
|
+
|
|
461
|
+
### Enabling/Disabling:
|
|
462
|
+
|
|
463
|
+
- If you call **`autoload(true)`** (or just **`autoload()`** as true is the parameter default), it initializes a MutationObserver.
|
|
464
|
+
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).
|
|
465
|
+
|
|
466
|
+
**./autoload.html**
|
|
467
|
+
```HTML
|
|
468
|
+
<!DOCTYPE html>
|
|
469
|
+
<html lang="en">
|
|
470
|
+
<head>
|
|
471
|
+
<meta charset="UTF-8" />
|
|
472
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
473
|
+
<title>Humble Beginnings</title>
|
|
474
|
+
<script src="./microcomponents.min.js"></script>
|
|
475
|
+
<script>
|
|
476
|
+
Object.assign(window, microcomponents); // make system global
|
|
477
|
+
autoload(true); // automatically load web components that are undefined
|
|
478
|
+
</script>
|
|
479
|
+
</head>
|
|
480
|
+
<body>
|
|
481
|
+
<div _mc="test-mymc"></div> <!--- example of a auto-loading micro component --->
|
|
482
|
+
<test-component></test-component> <!--- example of a auto-loading custom element --->
|
|
483
|
+
</body>
|
|
484
|
+
</html>
|
|
457
485
|
|
|
458
|
-
|
|
486
|
+
```
|
|
459
487
|
|
|
460
|
-
|
|
488
|
+
**./test/testmc.ts**
|
|
489
|
+
```typescript
|
|
490
|
+
'use strict';
|
|
491
|
+
import { DC, LooseObject } from '../microcomponents.js';
|
|
461
492
|
|
|
462
|
-
|
|
493
|
+
export default class extends DC {
|
|
494
|
+
constructor(target: HTMLElement) {
|
|
495
|
+
super(target);
|
|
496
|
+
delete this._mc; // not needed
|
|
497
|
+
}
|
|
463
498
|
|
|
464
|
-
|
|
499
|
+
oneInit() {
|
|
500
|
+
// console.log('testmc connected to DOM');
|
|
501
|
+
}
|
|
502
|
+
}
|
|
503
|
+
```
|
|
465
504
|
|
|
466
|
-
|
|
505
|
+
**./test/component.ts**
|
|
506
|
+
```typescript
|
|
507
|
+
'use strict';
|
|
508
|
+
import { DC, defineCE } from '.././microcomponents.js';
|
|
467
509
|
|
|
468
|
-
|
|
510
|
+
defineCE(
|
|
511
|
+
'test-mycomponent',
|
|
512
|
+
|
|
513
|
+
class extends DC {
|
|
514
|
+
data: unknown;
|
|
515
|
+
|
|
516
|
+
constructor(target: HTMLElement) {
|
|
517
|
+
super(target);
|
|
518
|
+
|
|
519
|
+
const that = this; // to help minification, you can use 'this' throughout the constructor as well
|
|
520
|
+
|
|
521
|
+
delete that._mc; // no inner classes needed
|
|
522
|
+
|
|
523
|
+
let shadow = (that as DC).target.attachShadow({ mode: 'open' });
|
|
524
|
+
shadow.innerHTML = `<style>${that.css}</style>${that.template}`;
|
|
525
|
+
|
|
526
|
+
}
|
|
527
|
+
|
|
528
|
+
get template() {
|
|
529
|
+
return /*html*/ `
|
|
530
|
+
<span>Hello World</span>
|
|
531
|
+
`;
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
get css() {
|
|
535
|
+
return /*css*/ `
|
|
536
|
+
div {
|
|
537
|
+
background-color: cyan;
|
|
538
|
+
}`;
|
|
539
|
+
}
|
|
540
|
+
}
|
|
541
|
+
);
|
|
542
|
+
```
|
|
543
|
+
|
|
544
|
+
**Page HTML after loading**
|
|
545
|
+
```HTML
|
|
546
|
+
(...)
|
|
547
|
+
<div _mc=""></div> <!--- _mc component definition now empty to avoid re-loading --->
|
|
548
|
+
<test-component></test-component> <!--- the custom element is initialized now --->
|
|
549
|
+
(...)
|
|
550
|
+
```
|
|
551
|
+
|
|
552
|
+
|
|
553
|
+
- If you call **`autoload(false)`**, it disconnects the observer, stopping the automatic loading feature.
|
|
554
|
+
|
|
555
|
+
|
|
556
|
+
#### Loading Mechanism:
|
|
557
|
+
|
|
558
|
+
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:
|
|
559
|
+
|
|
560
|
+
- **Undefined Custom Elements:** It looks for HTML elements whose tag names haven't been defined via customElements.define() (e.g., `<my-custom-tag>`).
|
|
561
|
+
|
|
562
|
+
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.
|
|
563
|
+
|
|
564
|
+
- **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">`**.
|
|
565
|
+
|
|
566
|
+
**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`**.
|
|
567
|
+
|
|
568
|
+
**These scripts are expected to `export default class {...}`** (usually extending DC from your code) that defines the behavior of this micro component.
|
|
569
|
+
|
|
570
|
+
**In general:**
|
|
571
|
+
|
|
572
|
+
- 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.
|
|
573
|
+
|
|
574
|
+
- The src of the script is determined by converting the component name (e.g., **`my-component`**) into a path (e.g., **`./my/component.js`**).
|
|
575
|
+
|
|
576
|
+
- These script tags are appended to the <head> of the document to initiate loading.
|
|
577
|
+
|
|
578
|
+
#### Internal Callbacks and Instantiation:
|
|
579
|
+
|
|
580
|
+
- Custom Elements: 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.
|
|
581
|
+
- Micro Components (_mc): When a script for an _mc component loads successfully, a another callback is executed. This callback:
|
|
582
|
+
- Stores the loaded component class in an internal repository to avoid unnecessary reloading.
|
|
583
|
+
- Finds all HTMLElement in the DOM that declared this _mc component.
|
|
584
|
+
- Instantiates the component class and adds it to the HTMLElement.
|
|
585
|
+
- Removes the component's name from the _mc attribute to prevent re-processing.
|
|
586
|
+
|
|
587
|
+
#### State Tracking:
|
|
588
|
+
|
|
589
|
+
`autoload()` internally uses two Map() objects:
|
|
590
|
+
|
|
591
|
+
- **`CEs`** (for Custom Elements that are currently loading)
|
|
592
|
+
- **`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
593
|
|
|
470
|
-
|
|
594
|
+
These maps are exposed for debugging purposes. You can access them via `autoload.state` which returns an object with `CEs` and `MCs` properties.
|
|
@@ -1,15 +1 @@
|
|
|
1
|
-
|
|
2
|
-
import { Parent } from './parent.js';
|
|
3
|
-
defineCE('test-grandparent', class TestGrandparent extends DC {
|
|
4
|
-
constructor(target) {
|
|
5
|
-
super(target);
|
|
6
|
-
}
|
|
7
|
-
onConnected() {
|
|
8
|
-
let that = this;
|
|
9
|
-
for (let x = 0; x < 5; x++) {
|
|
10
|
-
that.target.append(new Parent());
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
export const GrandParent = getCE('test-grandparent');
|
|
15
|
-
//# sourceMappingURL=grandparent.js.map
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.grandparent=e():t.grandparent=e()}(self,(()=>(()=>{"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,{GrandParent:()=>N});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 s=new Function("try {return this===window;}catch(e){ return false;}");let c=new Set;function a(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 i(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 s={once:!1};r&&(s.capture=r),o&&(s.once=o),t.addEventListener(e,n,s)}function d(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 m(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 s=t?._mc;if(!s)return;let c=e instanceof o?new o(e.type,e.data,"l"):new o(e,n,"l"),a="string"!=typeof e?e:new o(e,n,r);[...Object.values(s)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(c)})),/[ud]/.test(a.bubble)&&g(t,a)}function g(t,e){/[ud]/.test(e.bubble)&&setTimeout((()=>{if(-1===e.bubble.indexOf("l")&&(e.bubble+="l"),e.bubble.indexOf("u")>-1){let n=i(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)}s()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>c.add(t)));class f{#r;constructor(t,e=!1){var n;this.#r=new WeakRef(t||{}),(n=this).constructor!==h&&setTimeout((()=>{n.trigger("Init")}),0),function(t){if(!s()||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),s=r.replace(/^on[e]{0,1}/,""),a=s.toLowerCase();o&&Object.defineProperty(t,"on"+s,{configurable:!0,enumerable:!1,writable:!0,value:t=>{n.constructor.prototype[r].bind(n)(t)}}),c.has("on"+a)&&u(e,a,(t=>{n.trigger(s,t)}),!1,o)}))}}(this)}get target(){return this.#r.deref()}}class b extends f{_mc={};constructor(t){super(t)}static trigger=p;trigger(t,e={},n="l"){let r=this;if(r.constructor===b||r.constructor===h){let s=t instanceof o?new o(t.type,t.data,"l"):new o(t,e,"l"),c="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(s)})),void(/[ud]/.test(c.bubble)&&g(r.target,c))}if(r instanceof b||r instanceof h){const r=this,s="string"!=typeof t?t:new o(t,e,n),c="on"+s.type[0].toUpperCase()+s.type.slice(1);if(s.bubble.indexOf("l")>-1&&(s.immediateStopped||"function"!=typeof r[c]||(r[c](s),r.hasOwnProperty(c)&&delete r[c])),s.stopped||"l"===s.bubble)return r;/[ud]/.test(s.bubble)&&g(r.target,s)}}}class h extends f{_mc={};constructor(t,e=!1){super(t)}static add=d;static remove=m;static trigger=p;trigger(t,e={},n){b.prototype.trigger.call(this,t,e,n)}parent(t=""){let e=this.target;return l(e)?i(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return l(e)?i(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=a([...e.querySelectorAll(r)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return l(e)?a([...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 A(){[...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=`\nimport _ from "${t}";\nimport {DC} from "./microcomponents.js";\n\nconst elements = Array.from(document.querySelectorAll('[_mc*="${n}"]')).filter( element => element instanceof HTMLElement );\n\nelements.forEach((element) => {\n\tautoload.state.MCs.set( '${n}', _ ); // add class to MCs repository\n\tDC.add(element, _.name, new _(element)); // add instance to DOM\n\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${n}', '').replace( /ww/g, ' ').trim()); // remove name from elements "_mc" attribute\n});\n\nsetTimeout( () => {\n\tdocument.body.querySelector('script[name="${n}]"')?.remove();\n},0);`;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((()=>{console.log("attaching",e,v.state.MCs.get(e)),h.add(t,e,new(v.state.MCs.get(e))(t)),t.setAttribute("_mc",t.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim())}),5)}))}))}let E=!1,C=null;function v(t=!0){return t?(E=t,C=new MutationObserver(A),setTimeout((()=>{C.observe(document.body,{childList:!0,subtree:!0}),A()}),5),E):(C?.disconnect(),C=null,E)}v.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 M(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 S(t){return customElements.get(t)}function j(t,e){return Math.floor(Math.random()*(e-t+1)+t)}M("test-greatgrandchild",class extends h{constructor(t){super(t)}onConnected(){this.updateStyle()}updateStyle(){this.target.setAttribute("style","border-color:rgb("+j(0,255)+","+j(0,255)+","+j(0,255)+")")}});const T=S("test-greatgrandchild");M("test-grandchild",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<2;e++)t.target.append(new T)}});const x=S("test-grandchild");M("test-child",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<10;e++)t.target.append(new x)}});const L=S("test-child");M("test-parent",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new L)}});const P=S("test-parent");M("test-grandparent",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new P)}});const N=S("test-grandparent");return e})()));
|
package/public/test/testform.js
CHANGED
|
@@ -1,141 +1 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
import { DC, defineCE, formValues } from '.././microcomponents.js';
|
|
3
|
-
defineCE('test-testform', class TestTestForm extends DC {
|
|
4
|
-
data;
|
|
5
|
-
constructor(target) {
|
|
6
|
-
super(target);
|
|
7
|
-
const that = this;
|
|
8
|
-
delete that._mc;
|
|
9
|
-
let shadow = that.target.attachShadow({ mode: 'open' });
|
|
10
|
-
shadow.innerHTML = `<style>${that.css}</style>${that.template}`;
|
|
11
|
-
formValues(that, 'data', shadow);
|
|
12
|
-
that.data.bind(shadow);
|
|
13
|
-
}
|
|
14
|
-
get template() {
|
|
15
|
-
return `
|
|
16
|
-
<form>
|
|
17
|
-
<!-- sample form to start with -->
|
|
18
|
-
<fieldset>
|
|
19
|
-
<legend>Inputs</legend>
|
|
20
|
-
<label>text</label><input type="text" name="textInput" value="Hallo" /> <strong>2wB: </strong>{textInput}
|
|
21
|
-
<label>color</label><input type="color" name="colorInput" value="" />
|
|
22
|
-
<label>date</label><input type="date" name="dateInput" value="" />
|
|
23
|
-
<label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />
|
|
24
|
-
<label>email</label><input type="email" name="email" value="" />
|
|
25
|
-
<label>file</label><input type="file" name="fileInput" value="" />
|
|
26
|
-
<label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />
|
|
27
|
-
<label>month</label><input type="month" name="month" value="" />
|
|
28
|
-
<label>number</label><input type="number" name="number" value="" />
|
|
29
|
-
<label>password</label><input type="password" name="passInput" value="" />
|
|
30
|
-
<label>range</label><input type="range" name="rangeInput" value="" />
|
|
31
|
-
<label>search</label><input type="search" name="searchInput" value="" />
|
|
32
|
-
<label>tel</label><input type="tel" name="telInput" value="" />
|
|
33
|
-
<label>time</label><input type="time" name="timeInput" value="" />
|
|
34
|
-
<label>url</label><input type="url" name="urlInput" value="" />
|
|
35
|
-
<label>week</label><input type="week" name="weekInput" value="" />
|
|
36
|
-
</fieldset>
|
|
37
|
-
|
|
38
|
-
<fieldset>
|
|
39
|
-
<legend>Selects</legend>
|
|
40
|
-
|
|
41
|
-
<label>singleSelect</label>
|
|
42
|
-
<select name="singleSelect">
|
|
43
|
-
<option disabled selected value> -- select -- </option>
|
|
44
|
-
<option value="1">Option 1</option>
|
|
45
|
-
<option value="2">Option 2</option>
|
|
46
|
-
<option value="3">Option 3</option>
|
|
47
|
-
<option value="4">Option 4</option>
|
|
48
|
-
</select>
|
|
49
|
-
|
|
50
|
-
<label>multiSelect</label>
|
|
51
|
-
<select name="multiSelect" multiple="multiple" type="select-multiple">
|
|
52
|
-
<option value="1">Option 1</option>
|
|
53
|
-
<option value="2" selected=true>Option 2</option>
|
|
54
|
-
<option value="3">Option 3</option>
|
|
55
|
-
<option value="4" selected=true>Option 4</option>
|
|
56
|
-
</select>
|
|
57
|
-
|
|
58
|
-
</fieldset>
|
|
59
|
-
|
|
60
|
-
<fieldset>
|
|
61
|
-
<legend>Radiobuttons <strong>2wB: </strong><span>{myRadio}</span></legend>
|
|
62
|
-
|
|
63
|
-
<label>radio1</label><input type="radio" name="myRadio" value="radio1">
|
|
64
|
-
<label>radio2</label><input type="radio" name="myRadio" value="radio2">
|
|
65
|
-
<label>radio3</label><input type="radio" name="myRadio" value="radio3">
|
|
66
|
-
|
|
67
|
-
</fieldset>
|
|
68
|
-
|
|
69
|
-
<fieldset>
|
|
70
|
-
<legend>Checkboxes</legend>
|
|
71
|
-
<label>cb1</label><input type="checkbox" name="cb1">
|
|
72
|
-
<label>cb2</label><input type="checkbox" name="cb2">
|
|
73
|
-
<label>cb3</label><input type="checkbox" name="cb3">
|
|
74
|
-
<label>cb4</label><input type="checkbox" name="cb4">
|
|
75
|
-
<label>cb5</label><input type="checkbox" name="cb5">
|
|
76
|
-
|
|
77
|
-
</fieldset>
|
|
78
|
-
|
|
79
|
-
<fieldset>
|
|
80
|
-
<legend>TextArea</legend>
|
|
81
|
-
<label>textArea</label>
|
|
82
|
-
<textarea name="textArea">abc</textarea>
|
|
83
|
-
</fieldset>
|
|
84
|
-
|
|
85
|
-
</form>
|
|
86
|
-
`;
|
|
87
|
-
}
|
|
88
|
-
get css() {
|
|
89
|
-
return `
|
|
90
|
-
legend {
|
|
91
|
-
display: inherit;
|
|
92
|
-
margin: inherit;
|
|
93
|
-
vertical-align: inherit;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
label {
|
|
97
|
-
display: inline;
|
|
98
|
-
margin-top: 5px;
|
|
99
|
-
margin-left: 5px;
|
|
100
|
-
vertical-align: top;
|
|
101
|
-
width: 10em;
|
|
102
|
-
text-align: right;
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
label::before {
|
|
106
|
-
content: ' ';
|
|
107
|
-
display: block;
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
form input,
|
|
111
|
-
form select,
|
|
112
|
-
form textarea {
|
|
113
|
-
margin-left: 5px;
|
|
114
|
-
margin-top: 0px;
|
|
115
|
-
display: inline;
|
|
116
|
-
}
|
|
117
|
-
|
|
118
|
-
form label + textarea {
|
|
119
|
-
display: inline-block;
|
|
120
|
-
margin-top: 3px;
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
form input + label {
|
|
124
|
-
width: inherit;
|
|
125
|
-
margin-top: 3px;
|
|
126
|
-
text-align: left;
|
|
127
|
-
}
|
|
128
|
-
|
|
129
|
-
body > form {
|
|
130
|
-
display: block;
|
|
131
|
-
}
|
|
132
|
-
|
|
133
|
-
form fieldset {
|
|
134
|
-
border: 1px solid darkslategrey;
|
|
135
|
-
border-radius: 3px;
|
|
136
|
-
margin: 0.5em 0;
|
|
137
|
-
}
|
|
138
|
-
`;
|
|
139
|
-
}
|
|
140
|
-
});
|
|
141
|
-
//# sourceMappingURL=testform.js.map
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.TestTestform=t():e.TestTestform=t()}(self,(()=>(()=>{"use strict";var e=new Function("try {return this===window;}catch(e){ return false;}");let t=new Set;e()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>t.add(e)));class n{#e;#t=!1;#n=!1;constructor(e,t={},n="l"){this.#e=e,this.data=t,this.bubble=n}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#n}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#n=!0}}var r=new Function("try {return this===window;}catch(e){ return false;}");let a=new Set;function l(e,t){let n=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const r=e?._mc;!t&&r?n=n.concat(Object.values(e._mc)):t&&r&&r[t]&&n.push(r[t])}})),n}function o(e,t,n=!0){let r=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&r.push(e._mc[t]):r=r.concat(Object.values(e._mc)),n))return r;e=e.parentNode}return r}function s(e){return e&&e instanceof HTMLElement}function i(e,t,n,r=!1,a=!1){let l={once:!1};r&&(l.capture=r),a&&(l.once=a),e.addEventListener(t,n,l)}function c(e,t,n={}){let r=e;if(!r._mc){let t=f?.debug;f.debug=!1,r._mc=new f(e),f.debug=t,delete r._mc._mc}const a=r._mc;return t.length&&!a[t]&&(a[t]=n,e instanceof HTMLElement&&!e.getAttribute("_mc")&&e.setAttribute("_mc","")),n}function u(e,t){if(!t)return;const n=e?._mc||{};n&&n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,r={},a="l"){let l=e?._mc;if(!l)return;let o=t instanceof n?new n(t.type,t.data,"l"):new n(t,r,"l"),s="string"!=typeof t?t:new n(t,r,a);[...Object.values(l)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(o)})),/[ud]/.test(s.bubble)&&d(e,s)}function d(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let n=o(e,"",!0)?.[0].target;n&&f.trigger(n,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&f.trigger(e,t)}))}),0)}r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>a.add(e)));class m{#r;constructor(e,t=!1){var n;this.#r=new WeakRef(e||{}),(n=this).constructor!==f&&setTimeout((()=>{n.trigger("Init")}),0),function(e){if(!r()||e.constructor===f)return;const t=e.target;if(t instanceof HTMLElement){let n=e;Object.getOwnPropertyNames(n.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof n.constructor.prototype[e])).forEach((r=>{let l=/^one/.test(r),o=r.replace(/^on[e]{0,1}/,""),s=o.toLowerCase();l&&Object.defineProperty(e,"on"+o,{configurable:!0,enumerable:!1,writable:!0,value:e=>{n.constructor.prototype[r].bind(n)(e)}}),a.has("on"+s)&&i(t,s,(e=>{n.trigger(o,e)}),!1,l)}))}}(this)}get target(){return this.#r.deref()}}class b extends m{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},r="l"){let a=this;if(a.constructor===b||a.constructor===f){let l=e instanceof n?new n(e.type,e.data,"l"):new n(e,t,"l"),o="string"!=typeof e?e:new n(e,t,r);return[...Object.getOwnPropertyNames(a)].forEach((e=>{a[e]?.trigger&&"function"==typeof a[e]?.trigger&&a[e]?.trigger(l)})),void(/[ud]/.test(o.bubble)&&d(a.target,o))}if(a instanceof b||a instanceof f){const a=this,l="string"!=typeof e?e:new n(e,t,r),o="on"+l.type[0].toUpperCase()+l.type.slice(1);if(l.bubble.indexOf("l")>-1&&(l.immediateStopped||"function"!=typeof a[o]||(a[o](l),a.hasOwnProperty(o)&&delete a[o])),l.stopped||"l"===l.bubble)return a;/[ud]/.test(l.bubble)&&d(a.target,l)}}}class f extends m{_mc={};constructor(e,t=!1){super(e)}static add=c;static remove=u;static trigger=p;trigger(e,t={},n){b.prototype.trigger.call(this,e,t,n)}parent(e=""){let t=this.target;return s(t)?o(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return s(t)?o(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!s(t))return[];const n=Math.random().toString().replace(".",""),r='[_mc]:not([temp_id="'+n+'"] [_mc] [_mc])';t.setAttribute("temp_id",n);const a=l([...t.querySelectorAll(r)],e);return t.removeAttribute("temp_id"),a}descendants(e=""){let t=this?.target;return s(t)?l([...t.querySelectorAll("*[_mc]")],e):[]}}const g=new Map,h=new Map;function y(e){const t="./"+e.split("-").join("/")+".js",n=document.createElement("script");return n.setAttribute("src",t),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("name",e),n.setAttribute("loading",""),i(n,"load",(e=>{n.removeAttribute("loading"),n.setAttribute("loaded","")})),i(n,"error",(e=>{console.error("could not load Custom Element code from",t)})),n}function v(){[...document.querySelectorAll(":not(:defined)")].filter((e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!g.has(e.tagName.toLowerCase()))).forEach((e=>{const t=e.tagName.toLowerCase(),n=(t.split("-").join("/"),y(t));i(n,"load",(()=>{g.set(t,customElements.get(e.tagName.toLowerCase()))})),g.set(t,"loading"),document.head.append(n)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((e=>!!e)).forEach((e=>{const t=e.getAttribute("_mc")?.split(" ").filter((e=>!!e))||[],n=t.filter((e=>!h.has(e)));n?.forEach((e=>{const t=y(e);i(t,"load",(()=>{return t=document.head.querySelector(`script[name="${e}"]`),void setTimeout((function(){const e=t.getAttribute("src"),n=t.getAttribute("name"),r=document.createElement("script");r.async=!0,r.setAttribute("type","module");const a=`\nimport _ from "${e}";\nimport {DC} from "./microcomponents.js";\n\nconst elements = Array.from(document.querySelectorAll('[_mc*="${n}"]')).filter( element => element instanceof HTMLElement );\n\nelements.forEach((element) => {\n\tautoload.state.MCs.set( '${n}', _ ); // add class to MCs repository\n\tDC.add(element, _.name, new _(element)); // add instance to DOM\n\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${n}', '').replace( /ww/g, ' ').trim()); // remove name from elements "_mc" attribute\n});\n\nsetTimeout( () => {\n\tdocument.body.querySelector('script[name="${n}]"')?.remove();\n},0);`;r.innerHTML=a,document.body.append(r)}),0);var t})),h.set(e,"loading"),document.head.append(t)}));const r=t.filter((e=>h.has(e)&&!h.get(e).length));r?.forEach((t=>{setTimeout((()=>{console.log("attaching",t,E.state.MCs.get(t)),f.add(e,t,new(E.state.MCs.get(t))(e)),e.setAttribute("_mc",e.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim())}),5)}))}))}let w=!1,O=null;function E(e=!0){return e?(w=e,O=new MutationObserver(v),setTimeout((()=>{O.observe(document.body,{childList:!0,subtree:!0}),v()}),5),w):(O?.disconnect(),O=null,w)}function A(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var r;(r=e[n])&&r.constructor&&r.constructor===Object?t[n]=A(e[n]):t[n]=e[n]})),t}function x(e,t=!0){let n={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const r=x(e[t],!1);for(const e in r)n[t+"."+e]=r[e]}else n[t]=e[t]})),t?A(n):n}function _(e,t){return JSON.stringify(x(e))===JSON.stringify(x(t))}function k(e,t){let n;return()=>{clearTimeout(n),n=setTimeout((function(){e(...arguments)}),t)}}function j(e,t){const n=Object.getOwnPropertyDescriptors(e);for(const[e,r]of Object.entries(n))("get"in r||"set"in r)&&Object.defineProperty(t,e,r)}E.state={CEs:g,MCs:h};class S extends HTMLElement{constructor(){super()}connectedCallback(){f.trigger(this,"Connected")}disconnectedCallback(){f.trigger(this,"Disconnected")}adoptedCallback(){f.trigger(this,"Adopted")}attributeChangedCallback(e,t,n){f.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:n})}}function C(e){return null!=e&&"object"==typeof e}function T(e){let t=new Set,n=/\{[^\{\}]*\}/g;return e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(n))).forEach((r=>{new Set(e.getAttribute(r)?.match(n)).forEach((e=>t.add(e.replace(/[\{\}]/g,""))))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(n))).forEach((e=>{(e.nodeValue||"").match(n).forEach((e=>{t.add(e.replace(/[\{\}]/g,""))}))})),[...t].map((e=>e.replace(/[\{\}]/g,"")))}const N=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class L extends f{data={};oldDisplay="";constructor(e){super(e);let t=this;T(e).forEach((e=>t.data[e]="")),M(t),t.#a(),delete t._mc}#a(){let e=this,t=e.target,n=!1;t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((n=>{let r=new Set(t.getAttribute(n)?.match(/\{[^\{\}]*\}/g));var a;e.data.observe((a=t.getAttribute(n),e=>{let l=a;r.forEach((t=>{l=l.replace(t,e[t.replace(/[\{\}]/g,"")])})),t.setAttribute(n,l)}))})),[...t.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{n=!0;let a=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));var l;e.data.observe((l=r.nodeValue,n=>{let o=l;a.forEach((e=>{o=o.replace(e,n[e.replace(/[\{\}]/g,"")])})),Object.keys(n).some((e=>!!n[e]))&&(e.oldDisplay?t.style=e.oldDisplay:t.removeAttribute("style"),delete e.oldDisplay),r.nodeValue=o})),e.oldDisplay=t.getAttribute("style)")||"",n&&!N.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(e){let t=this,n={};Object.keys(e.data).forEach((r=>{t.data.hasOwnProperty(r)&&(n[r]=e.data[r])})),JSON.stringify(n)!==JSON.stringify(t.data)&&Object.assign(t.data,n)}}const M=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if("_"===t[0]||void 0===e?.[t])return e;let n,r=e[t];if(!r.prototype)switch(typeof r){case"string":n=String;break;case"number":n=Number;break;case"boolean":n=Boolean;break;case"object":n=r instanceof Array?Array:Object;break;default:return}let a=class extends n{#l=!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=>!!T(e).length)).filter((e=>"STYLE"!==e.tagName))).forEach((e=>{e?._mc?._placeholders||f.add(e,"_placeholders",new L(e))}))}(e);const n=[...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),r=function(e){let t=x(e);n.forEach((e=>{e&&e._mc.trigger("data",t)}))};t.constructor.callbacks.push(r),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,n=C(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return void 0!==e&&(t.#l=e),t.constructor.callbacks.forEach((e=>{e(n)})),t}},l=new a(r);Object.defineProperty(e,t,{enumerable:!0,get(){if(C(l.valueOf())){let e=structuredClone(Object.assign({},l));setTimeout(k((function(){_(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 a==0&&(l=new a(structuredClone(Object.assign({},e))),j(e,l),l.seal()),Object.assign(l,e),setTimeout(k((function(){_(structuredClone(Object.assign({},l)),t)||l.notify()}),0),0)}else{let t=l.valueOf(),n=l.constructor.callbacks;l=new a(e),l.constructor.callbacks=n,e!==t&&l.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof l.valueOf(),l,"- CANNOT BECOME:",typeof e)}}),e[t]=r})),e);class I{constructor(e){}}class D extends I{#o;constructor(e){super(e),this.#o=e}get val(){return new FormData(this.#o.form).get(this.#o.name)}set val(e){[...this.#o.form.querySelectorAll(`input[type="radio"][name="${this.#o.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class H extends I{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.checked}set val(e){this.#o.checked=e}}class P extends I{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value}set val(e){this.#o.value=e}}class q extends I{#o;#s=!1;constructor(e){super(e),this.#o=e,this.#s=e.multiple}get val(){const e=[];return[...this.#o.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{e.push(t.value)})),this.#s?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#o.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1}))}}class $ extends I{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value||""}set val(e){this.#o.value=e}}return function(e,t,n=[]){if(customElements.get(e))return void console.warn(`IGNORED: Custom element "${e}" is already defined!`);if(!e.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(r,class extends S{instance;constructor(e){super();let n=new t(this,e);f.add(this,r,n)}static get observedAttributes(){return n}}))}("test-testform",class extends f{data;constructor(e){super(e);const t=this;delete t._mc;let n=t.target.attachShadow({mode:"open"});n.innerHTML=`<style>${t.css}</style>${t.template}`,function(e,t,n){let r=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],n={};return t.forEach((e=>{const t=e.getAttribute("name");if(t){let r=!1;switch((e=>e.tagName.toLowerCase())(e)){case"input":switch(e.type){case"radio":r=new D(e);break;case"checkbox":r=new H(e);break;default:r=new P(e)}break;case"select":r=new q(e);break;case"textarea":r=new $(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}r&&(f.add(e,t,r),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>r.val,set:e=>{r.val!==e&&(r.val=e)}}))}})),n})(n);e[t]=Object.assign({},r),M(e,t),j(r,e[t]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{i(n,"keyup",(n=>{e[t].notify()})),i(n,"change",(n=>{e[t].notify()})),i(n,"select",(n=>{e[t].notify()}))}))}(t,"data",n),t.data.bind(n)}get template(){return'\n <form>\n \x3c!-- sample form to start with --\x3e\n <fieldset>\n <legend>Inputs</legend>\n <label>text</label><input type="text" name="textInput" value="Hallo" /> <strong>2wB: </strong>{textInput}\n <label>color</label><input type="color" name="colorInput" value="" />\n <label>date</label><input type="date" name="dateInput" value="" />\n <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />\n <label>email</label><input type="email" name="email" value="" />\n <label>file</label><input type="file" name="fileInput" value="" />\n <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />\n <label>month</label><input type="month" name="month" value="" />\n <label>number</label><input type="number" name="number" value="" />\n <label>password</label><input type="password" name="passInput" value="" />\n <label>range</label><input type="range" name="rangeInput" value="" />\n <label>search</label><input type="search" name="searchInput" value="" />\n <label>tel</label><input type="tel" name="telInput" value="" />\n <label>time</label><input type="time" name="timeInput" value="" />\n <label>url</label><input type="url" name="urlInput" value="" />\n <label>week</label><input type="week" name="weekInput" value="" />\n </fieldset>\n\n <fieldset>\n <legend>Selects</legend>\n\n <label>singleSelect</label>\n <select name="singleSelect">\n <option disabled selected value> -- select -- </option>\n <option value="1">Option 1</option>\n <option value="2">Option 2</option>\n <option value="3">Option 3</option>\n <option value="4">Option 4</option>\n </select>\n\n <label>multiSelect</label>\n <select name="multiSelect" multiple="multiple" type="select-multiple">\n <option value="1">Option 1</option>\n <option value="2" selected=true>Option 2</option>\n <option value="3">Option 3</option>\n <option value="4" selected=true>Option 4</option>\n </select>\n\n </fieldset>\n\n <fieldset>\n <legend>Radiobuttons <strong>2wB: </strong><span>{myRadio}</span></legend>\n\n <label>radio1</label><input type="radio" name="myRadio" value="radio1">\n <label>radio2</label><input type="radio" name="myRadio" value="radio2">\n <label>radio3</label><input type="radio" name="myRadio" value="radio3">\n\n </fieldset>\n\n <fieldset>\n <legend>Checkboxes</legend>\n <label>cb1</label><input type="checkbox" name="cb1">\n <label>cb2</label><input type="checkbox" name="cb2">\n <label>cb3</label><input type="checkbox" name="cb3">\n <label>cb4</label><input type="checkbox" name="cb4">\n <label>cb5</label><input type="checkbox" name="cb5">\n\n </fieldset>\n\n <fieldset>\n <legend>TextArea</legend>\n <label>textArea</label>\n <textarea name="textArea">abc</textarea>\n </fieldset>\n\n </form>\n '}get css(){return"\nlegend {\n display: inherit;\n margin: inherit;\n vertical-align: inherit;\n}\n\nlabel {\n display: inline;\n margin-top: 5px;\n margin-left: 5px;\n vertical-align: top;\n width: 10em;\n text-align: right;\n}\n\nlabel::before {\n content: ' ';\n display: block;\n}\n\nform input,\nform select,\nform textarea {\n margin-left: 5px;\n margin-top: 0px;\n display: inline;\n}\n\nform label + textarea {\n display: inline-block;\n margin-top: 3px;\n}\n\nform input + label {\n width: inherit;\n margin-top: 3px;\n text-align: left;\n}\n\nbody > form {\n display: block;\n}\n\nform fieldset {\n border: 1px solid darkslategrey;\n border-radius: 3px;\n margin: 0.5em 0;\n}\n "}}),{}})()));
|
package/webpack.config.js
CHANGED
|
@@ -234,7 +234,7 @@ module.exports = [
|
|
|
234
234
|
entry: './build/test/grandparent.js',
|
|
235
235
|
mode: 'production',
|
|
236
236
|
output: {
|
|
237
|
-
path: path.resolve(__dirname, '
|
|
237
|
+
path: path.resolve(__dirname, 'build/test'),
|
|
238
238
|
filename: 'grandparent.js',
|
|
239
239
|
libraryTarget: 'umd',
|
|
240
240
|
library: 'grandparent',
|
|
@@ -271,7 +271,7 @@ module.exports = [
|
|
|
271
271
|
entry: './build/test/testform.js',
|
|
272
272
|
mode: 'production',
|
|
273
273
|
output: {
|
|
274
|
-
path: path.resolve(__dirname, '
|
|
274
|
+
path: path.resolve(__dirname, 'build/test'),
|
|
275
275
|
filename: 'testform.js',
|
|
276
276
|
libraryTarget: 'umd',
|
|
277
277
|
library: 'TestTestform',
|