@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.
@@ -1,3 +1,3 @@
1
1
  {
2
- "CodeGPT.apiKey": "Ollama"
2
+ "CodeGPT.apiKey": "CodeGPT Plus Beta"
3
3
  }
@@ -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
- - [Framework Classes](#framework-classes)
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
- ## Framework Classes
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
- #### Destroy (TBD)
486
+ ```
459
487
 
460
- Method Name: oneDestroy(event) (Proposed)
488
+ **./test/testmc.ts**
489
+ ```typescript
490
+ 'use strict';
491
+ import { DC, LooseObject } from '../microcomponents.js';
461
492
 
462
- Triggered: When a component is removed (e.g., via DC.remove or potentially parent removal).
493
+ export default class extends DC {
494
+ constructor(target: HTMLElement) {
495
+ super(target);
496
+ delete this._mc; // not needed
497
+ }
463
498
 
464
- Execution Order:
499
+ oneInit() {
500
+ // console.log('testmc connected to DOM');
501
+ }
502
+ }
503
+ ```
465
504
 
466
- Expected to run synchronously, starting from the deepest nested components upwards, finally calling oneDestroy on the component being removed itself.
505
+ **./test/component.ts**
506
+ ```typescript
507
+ 'use strict';
508
+ import { DC, defineCE } from '.././microcomponents.js';
467
509
 
468
- Requirement:
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
- - Would require defining a method named `oneDestroy` in your class.
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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@twobirds/microcomponents",
3
- "version": "0.0.64",
3
+ "version": "0.0.65",
4
4
  "description": "Micro Components Organization Class",
5
5
  "main": "./dist/microcomponents.ts",
6
6
  "types": "./dist/microcomponents.d.ts",
@@ -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
- - [Framework Classes](#framework-classes)
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
- ## Framework Classes
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
- #### Destroy (TBD)
486
+ ```
459
487
 
460
- Method Name: oneDestroy(event) (Proposed)
488
+ **./test/testmc.ts**
489
+ ```typescript
490
+ 'use strict';
491
+ import { DC, LooseObject } from '../microcomponents.js';
461
492
 
462
- Triggered: When a component is removed (e.g., via DC.remove or potentially parent removal).
493
+ export default class extends DC {
494
+ constructor(target: HTMLElement) {
495
+ super(target);
496
+ delete this._mc; // not needed
497
+ }
463
498
 
464
- Execution Order:
499
+ oneInit() {
500
+ // console.log('testmc connected to DOM');
501
+ }
502
+ }
503
+ ```
465
504
 
466
- Expected to run synchronously, starting from the deepest nested components upwards, finally calling oneDestroy on the component being removed itself.
505
+ **./test/component.ts**
506
+ ```typescript
507
+ 'use strict';
508
+ import { DC, defineCE } from '.././microcomponents.js';
467
509
 
468
- Requirement:
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
- - Would require defining a method named `oneDestroy` in your class.
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
- import { DC, defineCE, getCE } from '.././microcomponents.js';
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})()));
@@ -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" />&nbsp;<strong>2wB:&nbsp;</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&nbsp;<strong>2wB:&nbsp;</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" />&nbsp;<strong>2wB:&nbsp;</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&nbsp;<strong>2wB:&nbsp;</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, 'public/test'),
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, 'public/test'),
274
+ path: path.resolve(__dirname, 'build/test'),
275
275
  filename: 'testform.js',
276
276
  libraryTarget: 'umd',
277
277
  library: 'TestTestform',