@twobirds/microcomponents 0.2.2 → 0.2.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +45 -20
- package/dist/MC.min.js +1 -1
- package/dist/autoload.min.js +1 -1
- package/dist/core/MC.d.ts +288 -237
- package/dist/core/MC.d.ts.map +1 -1
- package/dist/core/MC.js +438 -182
- package/dist/core/elements.d.ts +58 -231
- package/dist/core/elements.d.ts.map +1 -1
- package/dist/core/elements.js +99 -214
- package/dist/core/index.d.ts +75 -0
- package/dist/core/index.d.ts.map +1 -0
- package/dist/core/index.js +72 -0
- package/dist/core/mcGuards.d.ts +7 -7
- package/dist/core/mcGuards.d.ts.map +1 -1
- package/dist/core/mcGuards.js +1 -1
- package/dist/elements.min.js +1 -1
- package/dist/formValues.min.js +1 -1
- package/dist/mcGuards.min.js +1 -1
- package/dist/microcomponents.min.js +1 -1
- package/dist/observables.min.js +1 -1
- package/dist/state/formValues.d.ts +3 -1
- package/dist/state/formValues.d.ts.map +1 -1
- package/dist/state/formValues.js +3 -1
- package/dist/state/index.d.ts +7 -0
- package/dist/state/index.d.ts.map +1 -0
- package/dist/state/index.js +5 -0
- package/dist/state/observables.d.ts +7 -59
- package/dist/state/observables.d.ts.map +1 -1
- package/dist/state/observables.js +63 -1
- package/dist/state/placeholders.d.ts +1 -0
- package/dist/state/placeholders.d.ts.map +1 -1
- package/dist/state/placeholders.js +1 -0
- package/dist/types/index.d.ts +7 -0
- package/dist/types/index.d.ts.map +1 -0
- package/dist/types/index.js +1 -0
- package/dist/types/mcTypes.d.ts +3 -3
- package/dist/types/mcTypes.js +1 -1
- package/dist/utils/autoload.d.ts +6 -2
- package/dist/utils/autoload.d.ts.map +1 -1
- package/dist/utils/autoload.js +7 -5
- package/dist/utils/events.d.ts +22 -79
- package/dist/utils/events.d.ts.map +1 -1
- package/dist/utils/events.js +63 -1
- package/dist/utils/helpers.d.ts +3 -2
- package/dist/utils/helpers.d.ts.map +1 -1
- package/dist/utils/helpers.js +3 -2
- package/dist/utils/index.d.ts +17 -0
- package/dist/utils/index.d.ts.map +1 -0
- package/dist/utils/index.js +12 -0
- package/package.json +9 -11
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
/**
|
|
2
|
+
# Overview
|
|
3
|
+
|
|
4
|
+
MicroComponents (MC) is a lightweight pattern for creating self-contained, event-driven, and composable UI components. It provides two core base classes: {@link MC} and {@link DC}, which differ primarily in their target attachment strategy and runtime environment requirements.
|
|
5
|
+
|
|
6
|
+
In general, your code extends from either of these classes depending on whether you need DOM interaction or pure logic encapsulation.
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## MC vs DC: Server vs Client
|
|
11
|
+
|
|
12
|
+
The key distinction between the two base classes is their execution context:
|
|
13
|
+
|
|
14
|
+
- **MC (MicroComponent)** – A general-purpose component that works in **any JavaScript environment**, including server-side runtimes (Node.js, Deno, etc.). It does not require a DOM and can be used for business logic, state management, or as a lightweight container. The `target` parameter is optional.
|
|
15
|
+
|
|
16
|
+
- **DC (DOM Component)** – A DOM-centric component that operates wherever a real ( browser ) or simulated ( jsdom, etc. ) DOM exists. It attaches itself to an HTMLElement and provides event handling, DOM traversal, and lifecycle management. The `target` parameter is required and must be an HTMLElement.
|
|
17
|
+
|
|
18
|
+
**HINT:** DCs can be attached to **any** DOM node ( HTMLElement ). That is you can connect them to <div>, <span> and the like. With a trick you can even define custom elements that convert themselves to e.g. a plain <div>.
|
|
19
|
+
|
|
20
|
+
### When to use which?
|
|
21
|
+
|
|
22
|
+
| Scenario | Recommended Class |
|
|
23
|
+
|----------|-------------------|
|
|
24
|
+
| Server-side rendering or logic | MC |
|
|
25
|
+
| Pure data processing without DOM | MC |
|
|
26
|
+
| Interactive UI elements in the browser | DC |
|
|
27
|
+
| Event-driven components attached to HTML nodes | DC |
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## Backreference Concept
|
|
32
|
+
|
|
33
|
+
Both MC and DC store a reference to their **host object** via the internal `_target` property (exposed as the `target` getter). This is a *backreference* — it points back to the object that contains or hosts this component instance.
|
|
34
|
+
|
|
35
|
+
- For **DC instances**, `this.target` refers to the HTMLElement in the DOM (or testing DOM such as jsdom) to which the component is attached.
|
|
36
|
+
- For **MC instances**, `this.target` can be any arbitrary object, allowing flexible composition patterns.
|
|
37
|
+
|
|
38
|
+
The reference is held via a `WeakRef` ([MDN WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef)) internally to avoid circular references and prevent memory leaks.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
# DC Class Specific
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## DOM Integration
|
|
45
|
+
|
|
46
|
+
When a DC is attached to an element via {@linkcode DC.add}, two things happen:
|
|
47
|
+
|
|
48
|
+
1. The element gains a `_mc` property (of type {@link McHost}) that holds references to all attached microcomponents, keyed by their unique identifiers.
|
|
49
|
+
2. The element receives a `data-mc` attribute, signaling that it hosts at least one microcomponent. This attribute is used internally for DOM queries and selectors.
|
|
50
|
+
|
|
51
|
+
This `_mc` property is the **only** interference with the native DOM structure, ensuring compatibility with other frameworks or libraries.
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## Lifecycle
|
|
56
|
+
|
|
57
|
+
- DC instances automatically trigger an `"Init"` lifecycle event asynchronously after construction.
|
|
58
|
+
- Methods prefixed with `on` or `one` (e.g., `onClick`, `oneUpdate`) are auto-attached as event listeners on the target element, supporting both native HTML events and custom microcomponent events.
|
|
59
|
+
- When using the static `assets` property to on-demand load shadow/target templates and css
|
|
60
|
+
- those are automatically attached to their respective target locations
|
|
61
|
+
- and all native event handlers in template code (<button click="...">) are automatically attached also
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
@module Core
|
|
65
|
+
@showGroups
|
|
66
|
+
*/
|
|
67
|
+
/** @group MicroComponents */
|
|
68
|
+
export { MC, DC, McBase } from './MC.js';
|
|
69
|
+
/** @group Elements */
|
|
70
|
+
export { defineCE, getCE, listCE } from './elements.js';
|
|
71
|
+
/** @group Types */
|
|
72
|
+
export type { TargetOf, McPascalCase, McElementConstructor } from './elements.js';
|
|
73
|
+
/** @group Helpers */
|
|
74
|
+
export { isMcHost } from './mcGuards.js';
|
|
75
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/core/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiEE;AAEF,6BAA6B;AAC7B,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,SAAS,CAAC;AACzC,sBAAsB;AACtB,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC;AACxD,mBAAmB;AACnB,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAClF,qBAAqB;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
/**
|
|
2
|
+
# Overview
|
|
3
|
+
|
|
4
|
+
MicroComponents (MC) is a lightweight pattern for creating self-contained, event-driven, and composable UI components. It provides two core base classes: {@link MC} and {@link DC}, which differ primarily in their target attachment strategy and runtime environment requirements.
|
|
5
|
+
|
|
6
|
+
In general, your code extends from either of these classes depending on whether you need DOM interaction or pure logic encapsulation.
|
|
7
|
+
|
|
8
|
+
---
|
|
9
|
+
|
|
10
|
+
## MC vs DC: Server vs Client
|
|
11
|
+
|
|
12
|
+
The key distinction between the two base classes is their execution context:
|
|
13
|
+
|
|
14
|
+
- **MC (MicroComponent)** – A general-purpose component that works in **any JavaScript environment**, including server-side runtimes (Node.js, Deno, etc.). It does not require a DOM and can be used for business logic, state management, or as a lightweight container. The `target` parameter is optional.
|
|
15
|
+
|
|
16
|
+
- **DC (DOM Component)** – A DOM-centric component that operates wherever a real ( browser ) or simulated ( jsdom, etc. ) DOM exists. It attaches itself to an HTMLElement and provides event handling, DOM traversal, and lifecycle management. The `target` parameter is required and must be an HTMLElement.
|
|
17
|
+
|
|
18
|
+
**HINT:** DCs can be attached to **any** DOM node ( HTMLElement ). That is you can connect them to <div>, <span> and the like. With a trick you can even define custom elements that convert themselves to e.g. a plain <div>.
|
|
19
|
+
|
|
20
|
+
### When to use which?
|
|
21
|
+
|
|
22
|
+
| Scenario | Recommended Class |
|
|
23
|
+
|----------|-------------------|
|
|
24
|
+
| Server-side rendering or logic | MC |
|
|
25
|
+
| Pure data processing without DOM | MC |
|
|
26
|
+
| Interactive UI elements in the browser | DC |
|
|
27
|
+
| Event-driven components attached to HTML nodes | DC |
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## Backreference Concept
|
|
32
|
+
|
|
33
|
+
Both MC and DC store a reference to their **host object** via the internal `_target` property (exposed as the `target` getter). This is a *backreference* — it points back to the object that contains or hosts this component instance.
|
|
34
|
+
|
|
35
|
+
- For **DC instances**, `this.target` refers to the HTMLElement in the DOM (or testing DOM such as jsdom) to which the component is attached.
|
|
36
|
+
- For **MC instances**, `this.target` can be any arbitrary object, allowing flexible composition patterns.
|
|
37
|
+
|
|
38
|
+
The reference is held via a `WeakRef` ([MDN WeakRef](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/WeakRef)) internally to avoid circular references and prevent memory leaks.
|
|
39
|
+
|
|
40
|
+
---
|
|
41
|
+
# DC Class Specific
|
|
42
|
+
---
|
|
43
|
+
|
|
44
|
+
## DOM Integration
|
|
45
|
+
|
|
46
|
+
When a DC is attached to an element via {@linkcode DC.add}, two things happen:
|
|
47
|
+
|
|
48
|
+
1. The element gains a `_mc` property (of type {@link McHost}) that holds references to all attached microcomponents, keyed by their unique identifiers.
|
|
49
|
+
2. The element receives a `data-mc` attribute, signaling that it hosts at least one microcomponent. This attribute is used internally for DOM queries and selectors.
|
|
50
|
+
|
|
51
|
+
This `_mc` property is the **only** interference with the native DOM structure, ensuring compatibility with other frameworks or libraries.
|
|
52
|
+
|
|
53
|
+
---
|
|
54
|
+
|
|
55
|
+
## Lifecycle
|
|
56
|
+
|
|
57
|
+
- DC instances automatically trigger an `"Init"` lifecycle event asynchronously after construction.
|
|
58
|
+
- Methods prefixed with `on` or `one` (e.g., `onClick`, `oneUpdate`) are auto-attached as event listeners on the target element, supporting both native HTML events and custom microcomponent events.
|
|
59
|
+
- When using the static `assets` property to on-demand load shadow/target templates and css
|
|
60
|
+
- those are automatically attached to their respective target locations
|
|
61
|
+
- and all native event handlers in template code (<button click="...">) are automatically attached also
|
|
62
|
+
---
|
|
63
|
+
|
|
64
|
+
@module Core
|
|
65
|
+
@showGroups
|
|
66
|
+
*/
|
|
67
|
+
/** @group MicroComponents */
|
|
68
|
+
export { MC, DC, McBase } from './MC.js';
|
|
69
|
+
/** @group Elements */
|
|
70
|
+
export { defineCE, getCE, listCE } from './elements.js';
|
|
71
|
+
/** @group Helpers */
|
|
72
|
+
export { isMcHost } from './mcGuards.js';
|
package/dist/core/mcGuards.d.ts
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/**
|
|
2
2
|
@module Guards
|
|
3
|
-
@hidden
|
|
4
3
|
|
|
5
4
|
Type guards for microcomponent hosts.
|
|
6
5
|
|
|
@@ -11,6 +10,7 @@ bundler can tree-shake everything else away.
|
|
|
11
10
|
*/
|
|
12
11
|
import type { McHost } from '../types/mcTypes.js';
|
|
13
12
|
/**
|
|
13
|
+
@hidden
|
|
14
14
|
Checks whether the given value is a microcomponent host element ({@link McHost}).
|
|
15
15
|
|
|
16
16
|
Bare form: narrows to the controller API only — no registry entries are claimed,
|
|
@@ -35,16 +35,16 @@ declare global {
|
|
|
35
35
|
}
|
|
36
36
|
|
|
37
37
|
const el = document.querySelector('form');
|
|
38
|
-
if (el &&
|
|
38
|
+
if (el && isMcHost(el)) {
|
|
39
39
|
el._mc.trigger('Ping'); // controller API — nothing else claimed
|
|
40
40
|
}
|
|
41
|
-
if (el &&
|
|
41
|
+
if (el && isMcHost(el, 'cart')) {
|
|
42
42
|
el._mc.cart.addItem(item); // Cart — presence checked by the guard
|
|
43
43
|
}
|
|
44
44
|
```
|
|
45
45
|
*/
|
|
46
|
-
export declare function
|
|
47
|
-
export declare function
|
|
48
|
-
export declare function
|
|
49
|
-
export declare function
|
|
46
|
+
export declare function isMcHost<T extends HTMLElement, K extends keyof McRegistry & string>(element: T, key: K): element is McHost<T, Pick<McRegistry, K>>;
|
|
47
|
+
export declare function isMcHost<K extends keyof McRegistry & string>(element: unknown, key: K): element is McHost<HTMLElement, Pick<McRegistry, K>>;
|
|
48
|
+
export declare function isMcHost<T extends HTMLElement>(element: T): element is McHost<T>;
|
|
49
|
+
export declare function isMcHost(element: unknown): element is McHost;
|
|
50
50
|
//# sourceMappingURL=mcGuards.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"mcGuards.d.ts","sourceRoot":"","sources":["../../src/core/mcGuards.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"mcGuards.d.ts","sourceRoot":"","sources":["../../src/core/mcGuards.ts"],"names":[],"mappings":"AAAA;;;;;;;;;EASE;AACF,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAElD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiCE;AACF,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,EAAE,CAAC,SAAS,MAAM,UAAU,GAAG,MAAM,EAClF,OAAO,EAAE,CAAC,EACV,GAAG,EAAE,CAAC,GACJ,OAAO,IAAI,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AAC7C,wBAAgB,QAAQ,CAAC,CAAC,SAAS,MAAM,UAAU,GAAG,MAAM,EAC3D,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,CAAC,GACJ,OAAO,IAAI,MAAM,CAAC,WAAW,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,CAAC,CAAC;AACvD,wBAAgB,QAAQ,CAAC,CAAC,SAAS,WAAW,EAAE,OAAO,EAAE,CAAC,GAAG,OAAO,IAAI,MAAM,CAAC,CAAC,CAAC,CAAC;AAClF,wBAAgB,QAAQ,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,MAAM,CAAC"}
|
package/dist/core/mcGuards.js
CHANGED
package/dist/elements.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function s(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function c(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:s(document,t[i]);break;case`targetCss`:s(document,t[i]);break;case`shadowCss`:s(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],u(r,e);break;case`targetHtml`:n.innerHTML=t[i],u(n,e);break}})}function l(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function u(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function d(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function f(e,t,n={}){let r=e;`_mc`in e||(r._mc=new y(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function p(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function m(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function h(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function g(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function _(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var v=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof y&&this.constructor!==y){h(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&m(this)}}get target(){return this._target.deref()}},y=class e extends v{static tag;static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor
|
|
1
|
+
function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function s(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function c(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:s(document,t[i]);break;case`targetCss`:s(document,t[i]);break;case`shadowCss`:s(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],u(r,e);break;case`targetHtml`:n.innerHTML=t[i],u(n,e);break}})}function l(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function u(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function d(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function f(e,t,n={}){let r=e;`_mc`in e||(r._mc=new y(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function p(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function m(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function h(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function g(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function _(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var v=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof y&&this.constructor!==y){h(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&m(this)}}get target(){return this._target.deref()}},y=class e extends v{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?c(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?l(r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),c(this,t),n._assets=Object.assign({},n._assets,t),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return f(e,t,n)}static remove(e,t){p(e,t)}static get(e,t,n){if(!d(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=_(this.target,e);for(;n;)t.push(n),n=_(n.target,e);return t}closest(e){return _(this.target,e)}children(e){let t=g(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function b(e,t){return Object.defineProperty(t,"name",{value:e})}function x(e){return class extends e{constructor(...e){super(...e)}}}function S(e,t,n=[],r){if(customElements.get(e)){console.warn(`IGNORED: Custom element "${e}" is already defined!`);return}if(!e.includes(`-`))throw Error(`createCustomElement: tagName must contain at least one hyphen ("-").`);let i=HTMLElement;r&&(i=document.createElement(r).constructor);let a=o(e);if(!(t.prototype instanceof v))return customElements.define(e,t),t;let s=b(a,class extends x(i){constructor(e){super(),y.add(this,a,new t(this,e))}connectedCallback(){this.dispatchEvent(new CustomEvent(`_mcConnected`))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent(`_mcConnectedMove`))}disconnectedCallback(){this.dispatchEvent(new CustomEvent(`_mcDisconnected`))}adoptedCallback(){this.dispatchEvent(new CustomEvent(`_mcAdopted`))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent(`_mcAttributeChanged`,{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent(`_mcFormReset`))}static get observedAttributes(){return[...n]}});return customElements.define(e,s,{extends:r}),S.list||=[],S.list.push(e),s}function C(e){return customElements.get(e)}function w(){return S.list??[]}export{S as defineCE,C as getCE,w as listCE};
|
package/dist/formValues.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(){return typeof window<`u`&&window.document!==void 0}function s(e){return typeof e==`object`&&!!e&&e.constructor===Object}function c(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];s(a)?t[i]=c(a):t[i]=a}return t}function l(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=l(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?c(n):n}function u(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!u(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!u(n[t],r[t]))return!1}return!0}function d(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}function f(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function p(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:f(document,t[i]);break;case`targetCss`:f(document,t[i]);break;case`shadowCss`:f(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],h(r,e);break;case`targetHtml`:n.innerHTML=t[i],h(n,e);break}})}function m(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function h(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function g(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function _(e,t,n={}){let r=e;`_mc`in e||(r._mc=new w(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function v(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function y(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function b(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function x(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function S(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var C=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof w&&this.constructor!==w){b(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&y(this)}}get target(){return this._target.deref()}},w=class e extends C{static tag;static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor,r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}if(n.assets.length&&m(r,n.assets).then(e=>{let t=Object.fromEntries(n.assets.map((t,n)=>[t,e[n]]));p(this,t),this.trigger(`assets`,t)}),n.tag===``){this.target.remove();return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])})}static add(e,t,n={}){return _(e,t,n)}static remove(e,t){v(e,t)}static get(e,t,n){if(!g(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=S(this.target,e);for(;n;)t.push(n),n=S(n.target,e);return t}closest(e){return S(this.target,e)}children(e){let t=x(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function T(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?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=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var E=[`INPUT`,`SELECT`,`TEXTAREA`],D=class extends w{data={};oldDisplay=``;constructor(e){super(e),T(e).forEach(e=>this.data[e]=``),F(this),this.#e()}#e(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(e.getAttribute(t)??``))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=new Set((n.nodeValue??``).match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>i=>{let a=t;r.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(n.nodeValue??``)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!E.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function O(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!T(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function k(e){O(e).forEach(e=>{e?._mc?._placeholders||w.add(e,`_placeholders`,new D(e))})}function A(e){return typeof e==`object`&&!!e}var j={};function M(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],A(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(o()){if(A(this.valueOf())){k(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=l(e);t.forEach(e=>{e&&a(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=A(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return j[n]=r,r}function N(e){return j[e.constructor.name]||M(e)}function P(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function F(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!P(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(N(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(A(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){u(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(A(a.valueOf())&&!(a.valueOf()instanceof Array))P(a)||(a=new(N(e))(structuredClone(Object.assign({},e))),d(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(N(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function I(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];P(n)||F(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}I(w);var L=e=>e.tagName.toLowerCase(),R=class{constructor(e){}},z=class extends R{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]];t.filter(t=>t.getAttribute(`value`)===e).shift().checked=!0}},B=class extends R{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},V=class extends R{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},H=class extends R{#e;#t=!1;constructor(e){super(e),this.#e=e,this.#t=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#t?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},U=class extends R{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},W=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(L(e)){case`input`:switch(e.type){case`radio`:r=new z(e);break;case`checkbox`:r=new B(e);break;default:r=new V(e)}break;case`select`:r=new H(e);break;case`textarea`:r=new U(e);break}if(r){let i=r;w.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function G(e,t,n){if(!o())return;let r=W(n),i=e;i[t]=Object.assign({},r),F(e,t);let a=i[t];d(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function K(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return G(this,t,e),this}})}export{K as formValuePlugin,G as formValues};
|
|
1
|
+
function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(){return typeof window<`u`&&window.document!==void 0}function s(e){return typeof e==`object`&&!!e&&e.constructor===Object}function c(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];s(a)?t[i]=c(a):t[i]=a}return t}function l(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=l(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?c(n):n}function u(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!u(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!u(n[t],r[t]))return!1}return!0}function d(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}function f(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function p(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:f(document,t[i]);break;case`targetCss`:f(document,t[i]);break;case`shadowCss`:f(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],h(r,e);break;case`targetHtml`:n.innerHTML=t[i],h(n,e);break}})}function m(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function h(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function g(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function _(e,t,n={}){let r=e;`_mc`in e||(r._mc=new w(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function v(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function y(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function b(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function x(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function S(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var C=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof w&&this.constructor!==w){b(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&y(this)}}get target(){return this._target.deref()}},w=class e extends C{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?p(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?m(r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),p(this,t),n._assets=Object.assign({},n._assets,t),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return _(e,t,n)}static remove(e,t){v(e,t)}static get(e,t,n){if(!g(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=S(this.target,e);for(;n;)t.push(n),n=S(n.target,e);return t}closest(e){return S(this.target,e)}children(e){let t=x(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function T(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?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=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var E=[`INPUT`,`SELECT`,`TEXTAREA`],D=class extends w{data={};oldDisplay=``;constructor(e){super(e),T(e).forEach(e=>this.data[e]=``),F(this),this.#attachCallbacks()}#attachCallbacks(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(e.getAttribute(t)??``))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=new Set((n.nodeValue??``).match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>i=>{let a=t;r.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(n.nodeValue??``)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!E.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function O(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!T(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function k(e){O(e).forEach(e=>{e?._mc?._placeholders||w.add(e,`_placeholders`,new D(e))})}function A(e){return typeof e==`object`&&!!e}var j={};function M(e){let t=e.constructor,n=t.name,r=class extends t{#notify=!0;#callbacks=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],A(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#callbacks}set callbacks(e){this.#callbacks=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#callbacks.push(e),this}unsubscribe(e){return this.#callbacks=this.#callbacks.filter(t=>t!==e),this}bind(e){if(o()){if(A(this.valueOf())){k(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#callbacks.push(function(e){let n=l(e);t.forEach(e=>{e&&a(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=A(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#notify=e),this.#notify&&this.#callbacks.forEach(e=>{e(t)}),this}};return j[n]=r,r}function N(e){return j[e.constructor.name]||M(e)}function P(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function F(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!P(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(N(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(A(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){u(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(A(a.valueOf())&&!(a.valueOf()instanceof Array))P(a)||(a=new(N(e))(structuredClone(Object.assign({},e))),d(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(N(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function I(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];P(n)||F(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}I(w);var L=e=>e.tagName.toLowerCase(),R=class{constructor(e){}},z=class extends R{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]];t.filter(t=>t.getAttribute(`value`)===e).shift().checked=!0}},B=class extends R{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},V=class extends R{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},H=class extends R{#e;#multi=!1;constructor(e){super(e),this.#e=e,this.#multi=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#multi?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},U=class extends R{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},W=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(L(e)){case`input`:switch(e.type){case`radio`:r=new z(e);break;case`checkbox`:r=new B(e);break;default:r=new V(e)}break;case`select`:r=new H(e);break;case`textarea`:r=new U(e);break}if(r){let i=r;w.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function G(e,t,n){if(!o())return;let r=W(n),i=e;i[t]=Object.assign({},r),F(e,t);let a=i[t];d(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function K(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return G(this,t,e),this}})}export{K as formValuePlugin,G as formValues};
|
package/dist/mcGuards.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function e(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}export{e as
|
|
1
|
+
function e(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}export{e as isMcHost};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function e(e){return`_mc`+e[0].toUpperCase()+e.substring(1)}function t(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function n(e,r,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>n(e,r,i));return}e.removeEventListener(t(e,r),i)}}function r(e,n,i,a=!1){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,n,i));return}return e.addEventListener(t(e,n),i,{capture:!1,once:a}),i}}function i(e,t,n){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>i(e,t,n));return}return r(e,t,n,!0),n}}var a=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function o(e,n,r={},i=`l`,s){if(!e)return;if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>o(e,n,r,i));return}let c=/^_mc/.test(n)?n:t(e,n),l=s||new a,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(i)&&(e.dispatchEvent(u),l.stopped)||/[ud]/.test(i)&&queueMicrotask(()=>{if(i.indexOf(`u`)>-1&&o(e.parentElement,c,r,`lu`,l),i.indexOf(`d`)>-1)for(let t of e.children)o(t,c,r,`ld`)})}function s(){return typeof window<`u`&&window.document!==void 0}function c(e){return typeof e==`object`&&!!e&&e.constructor===Object}function l(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];c(a)?t[i]=l(a):t[i]=a}return t}function u(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=u(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?l(n):n}function d(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!d(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!d(n[t],r[t]))return!1}return!0}function f(e,t={}){let n=t,r=typeof e==`string`?e.split(`.`):e;if(!(!n||!r[0]||!n[r[0]])){if(r.length>1){let e=n[r[0]];return c(e)?f(r.slice(1),e):void 0}return n[r[0]]}}function p(e,t,...n){let r=[e,t,...n];if(r.length>2){for(;r.length>1;)r[0]=p(r[0],r[1]),r.splice(1,1);return r[0]}if(typeof e==`string`){let n=e;return e.match(/\{[^\{\}]*\}/g)?.forEach(e=>{let r=f(e.substring(1,e.length-1),t);r!==void 0&&(n=n.replace(e,String(r)))}),n}else if(c(e)){let n=e;Object.keys(n).forEach(e=>{Object.prototype.hasOwnProperty.call(n,e)&&(n[e]=p(n[e],t))})}return e}function m(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function h(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>{e(...r)},t)}}function g(e){let t=document.createElement(`template`);return e=e.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,`<$1$2></$1>`),t.innerHTML=e,t.content.normalize(),Array.from(t.content.childNodes)}function _(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}function v(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function y(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:v(document,t[i]);break;case`targetCss`:v(document,t[i]);break;case`shadowCss`:v(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],x(r,e);break;case`targetHtml`:n.innerHTML=t[i],x(n,e);break}})}function b(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function x(e,t){let n=[...e.querySelectorAll(`*`)];for(let e of n){if(!(e instanceof HTMLElement))continue;let n=[...e.attributes];for(let i of n){let n=i.name.toLowerCase();if(!(`on`+n in e))continue;let a=i.value.trim().split(`|`);if(a.length<2)continue;let[s,c,l]=a;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?r(e,n,()=>t.trigger(c,u)):r(e,n,()=>o(s,c,u))}}}function S(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function C(e,t,n={}){let r=e;`_mc`in e||(r._mc=new j(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function w(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function T(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function E(e){let t=e.target,n=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(n).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof n[e]==`function`);for(let e of a){let n=/^one/.test(e);r(t,e.replace(/^one?/,``),t=>i[e](t),n)}}function D(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function O(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var k=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof j&&this.constructor!==j){E(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&T(this)}}get target(){return this._target.deref()}},A=class extends k{constructor(e){super(e)}},j=class e extends k{static tag;static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor,r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}if(n.assets.length&&b(r,n.assets).then(e=>{let t=Object.fromEntries(n.assets.map((t,n)=>[t,e[n]]));y(this,t),this.trigger(`assets`,t)}),n.tag===``){this.target.remove();return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])})}static add(e,t,n={}){return C(e,t,n)}static remove(e,t){w(e,t)}static get(e,t,n){if(!S(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,t){n(this.target,e,t)}on(e,t){return r(this.target,e,t)}one(e,t){return i(this.target,e,t)}trigger(e,t={},n=`l`,r){o(this.target,e,t,n,r)}ancestors(e){let t=[],n=O(this.target,e);for(;n;)t.push(n),n=O(n.target,e);return t}closest(e){return O(this.target,e)}children(e){let t=D(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}},M=new Set;function N(e){return()=>{let t=Array.from(document.querySelectorAll(`[data-mc*="${e}"]`)).filter(e=>e instanceof HTMLElement);if(t.length===0)return;let n=customElements.get(e);for(let r of t){try{j.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!S(e))throw`create() of Class ${n.name} did not return a McHost.`;e.setAttribute(`data-mc`,r.getAttribute(`data-mc`)??``),r.replaceWith(e),r=e}else throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`}let t=r.getAttribute(`data-mc`).split(` `).filter(t=>t!==e&&t!==``).join(` `).trim();r.setAttribute(`data-mc`,t)}}}function P(e){if(M.has(e))return;M.add(e);let t=`./`+e.split(`-`).join(`/`)+`.js`,n=document.createElement(`script`);n.setAttribute(`src`,t),n.setAttribute(`blocking`,`render`),n.async=!0,n.setAttribute(`type`,`module`),n.setAttribute(`data-name`,e),n.setAttribute(`loading`,``),customElements.whenDefined(e).then(N(e)),n.addEventListener(`load`,t=>{M.delete(e),document.head.querySelector(`script[data-name="${e}"]`)?.remove()}),n.addEventListener(`error`,e=>{console.error(`could not load DC code from`,t)}),document.head.append(n)}function F(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!M.has(e.tagName.toLowerCase())).forEach(e=>{P(e.tagName.toLowerCase())}),[...document.querySelectorAll(`[data-mc]:not([data-mc=""]`)].filter(e=>!!e).forEach(e=>{(e.getAttribute(`data-mc`)?.split(` `).filter(e=>e!==``))?.forEach(e=>{let t=customElements.get(e);!M.has(e)&&!t?P(e):t&&N(e)()})})}var I=null,L=function(e=!0){return e?I?!0:(I=new MutationObserver(F),setTimeout(()=>{I.observe(document.body,{childList:!0,subtree:!0}),F()},5),window.autoload??=L,!0):(I&&=(I.disconnect(),null),!1)};L.state=M;function ee(e,t){return Object.defineProperty(t,"name",{value:e})}function te(e){return class extends e{constructor(...e){super(...e)}}}function ne(e,t,n=[],r){if(customElements.get(e)){console.warn(`IGNORED: Custom element "${e}" is already defined!`);return}if(!e.includes(`-`))throw Error(`createCustomElement: tagName must contain at least one hyphen ("-").`);let i=HTMLElement;r&&(i=document.createElement(r).constructor);let a=m(e);if(!(t.prototype instanceof k))return customElements.define(e,t),t;let o=ee(a,class extends te(i){constructor(e){super(),j.add(this,a,new t(this,e))}connectedCallback(){this.dispatchEvent(new CustomEvent(`_mcConnected`))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent(`_mcConnectedMove`))}disconnectedCallback(){this.dispatchEvent(new CustomEvent(`_mcDisconnected`))}adoptedCallback(){this.dispatchEvent(new CustomEvent(`_mcAdopted`))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent(`_mcAttributeChanged`,{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent(`_mcFormReset`))}static get observedAttributes(){return[...n]}});return customElements.define(e,o,{extends:r}),o}function R(e){return customElements.get(e)}function z(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?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=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var B=[`INPUT`,`SELECT`,`TEXTAREA`],V=class extends j{data={};oldDisplay=``;constructor(e){super(e),z(e).forEach(e=>this.data[e]=``),Y(this),this.#e()}#e(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(e.getAttribute(t)??``))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=new Set((n.nodeValue??``).match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>i=>{let a=t;r.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(n.nodeValue??``)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!B.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function H(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!z(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function U(e){H(e).forEach(e=>{e?._mc?._placeholders||j.add(e,`_placeholders`,new V(e))})}function W(e){return typeof e==`object`&&!!e}var G={};function K(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],W(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(s()){if(W(this.valueOf())){U(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=u(e);t.forEach(e=>{e&&o(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=W(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return G[n]=r,r}function q(e){return G[e.constructor.name]||K(e)}function J(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function Y(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!J(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(q(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(W(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){d(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(W(a.valueOf())&&!(a.valueOf()instanceof Array))J(a)||(a=new(q(e))(structuredClone(Object.assign({},e))),_(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(q(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function X(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];J(n)||Y(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}X(j);var re=e=>e.tagName.toLowerCase(),Z=class{constructor(e){}},Q=class extends Z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]];t.filter(t=>t.getAttribute(`value`)===e).shift().checked=!0}},ie=class extends Z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},ae=class extends Z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},oe=class extends Z{#e;#t=!1;constructor(e){super(e),this.#e=e,this.#t=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#t?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},se=class extends Z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},ce=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(re(e)){case`input`:switch(e.type){case`radio`:r=new Q(e);break;case`checkbox`:r=new ie(e);break;default:r=new ae(e)}break;case`select`:r=new oe(e);break;case`textarea`:r=new se(e);break}if(r){let i=r;j.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function $(e,t,n){if(!s())return;let r=ce(n),i=e;i[t]=Object.assign({},r),Y(e,t);let a=i[t];_(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function le(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return $(this,t,e),this}})}export{a as BubbleController,j as DC,A as MC,k as McBase,L as autoload,x as bindTemplateEvents,_ as copyGettersSetters,h as debounce,d as deepEqual,ne as defineCE,u as flattenObject,le as formValuePlugin,$ as formValues,R as getCE,e as getMcEventName,g as htmlToElements,v as injectCSS,J as isAlreadyObserved,s as isBrowser,S as isMcDOM,c as isNativeObject,m as kebabToPascal,b as loadAssets,f as nameSpace,Y as observe,X as observePlugin,n as off,r as on,i as one,p as parse,y as processAssets,l as sortObject,o as trigger,t as trueEventName};
|
|
1
|
+
function e(e){return`_mc`+e[0].toUpperCase()+e.substring(1)}function t(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function n(e,r,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>n(e,r,i));return}e.removeEventListener(t(e,r),i)}}function r(e,n,i,a=!1){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,n,i));return}return e.addEventListener(t(e,n),i,{capture:!1,once:a}),i}}function i(e,t,n){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>i(e,t,n));return}return r(e,t,n,!0),n}}var a=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function o(e,n,r={},i=`l`,s){if(!e)return;if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>o(e,n,r,i));return}let c=/^_mc/.test(n)?n:t(e,n),l=s||new a,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(i)&&(e.dispatchEvent(u),l.stopped)||/[ud]/.test(i)&&queueMicrotask(()=>{if(i.indexOf(`u`)>-1&&o(e.parentElement,c,r,`lu`,l),i.indexOf(`d`)>-1)for(let t of e.children)o(t,c,r,`ld`)})}function s(){return typeof window<`u`&&window.document!==void 0}function c(e){return typeof e==`object`&&!!e&&e.constructor===Object}function l(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];c(a)?t[i]=l(a):t[i]=a}return t}function u(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=u(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?l(n):n}function d(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!d(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!d(n[t],r[t]))return!1}return!0}function f(e,t={}){let n=t,r=typeof e==`string`?e.split(`.`):e;if(!(!n||!r[0]||!n[r[0]])){if(r.length>1){let e=n[r[0]];return c(e)?f(r.slice(1),e):void 0}return n[r[0]]}}function p(e,t,...n){let r=[e,t,...n];if(r.length>2){for(;r.length>1;)r[0]=p(r[0],r[1]),r.splice(1,1);return r[0]}if(typeof e==`string`){let n=e;return e.match(/\{[^\{\}]*\}/g)?.forEach(e=>{let r=f(e.substring(1,e.length-1),t);r!==void 0&&(n=n.replace(e,String(r)))}),n}else if(c(e)){let n=e;Object.keys(n).forEach(e=>{Object.prototype.hasOwnProperty.call(n,e)&&(n[e]=p(n[e],t))})}return e}function m(e){return e.split(`-`).map(e=>e.charAt(0).toUpperCase()+e.slice(1)).join(``)}function h(e,t){let n;return(...r)=>{clearTimeout(n),n=setTimeout(()=>{e(...r)},t)}}function g(e){let t=document.createElement(`template`);return e=e.replace(/<([A-Za-z0-9\-]*)([^>\/]*)(\/>)/gi,`<$1$2></$1>`),t.innerHTML=e,t.content.normalize(),Array.from(t.content.childNodes)}function _(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}function v(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function y(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:v(document,t[i]);break;case`targetCss`:v(document,t[i]);break;case`shadowCss`:v(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],x(r,e);break;case`targetHtml`:n.innerHTML=t[i],x(n,e);break}})}function b(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function x(e,t){let n=[...e.querySelectorAll(`*`)];for(let e of n){if(!(e instanceof HTMLElement))continue;let n=[...e.attributes];for(let i of n){let n=i.name.toLowerCase();if(!(`on`+n in e))continue;let a=i.value.trim().split(`|`);if(a.length<2)continue;let[s,c,l]=a;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?r(e,n,()=>t.trigger(c,u)):r(e,n,()=>o(s,c,u))}}}function S(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function C(e,t,n={}){let r=e;`_mc`in e||(r._mc=new k(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function ee(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function w(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function T(e){let t=e.target,n=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(n).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof n[e]==`function`);for(let e of a){let n=/^one/.test(e);r(t,e.replace(/^one?/,``),t=>i[e](t),n)}}function te(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function E(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var D=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof k&&this.constructor!==k){T(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&w(this)}}get target(){return this._target.deref()}},O=class extends D{constructor(e){super(e)}},k=class e extends D{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?y(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?b(r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),y(this,t),n._assets=Object.assign({},n._assets,t),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return C(e,t,n)}static remove(e,t){ee(e,t)}static get(e,t,n){if(!S(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,t){n(this.target,e,t)}on(e,t){return r(this.target,e,t)}one(e,t){return i(this.target,e,t)}trigger(e,t={},n=`l`,r){o(this.target,e,t,n,r)}ancestors(e){let t=[],n=E(this.target,e);for(;n;)t.push(n),n=E(n.target,e);return t}closest(e){return E(this.target,e)}children(e){let t=te(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}},A=new Set;function j(e){return()=>{let t=Array.from(document.querySelectorAll(`[data-mc*="${e}"]`)).filter(e=>e instanceof HTMLElement);if(t.length===0)return;let n=customElements.get(e);for(let r of t){try{k.add(r,n.name,new n(r))}catch{if(`create`in n&&typeof n.create==`function`){let e=n.create(r);if(!S(e))throw`create() of Class ${n.name} did not return a McHost.`;e.setAttribute(`data-mc`,r.getAttribute(`data-mc`)??``),r.replaceWith(e),r=e}else throw`Class ${n.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`}let t=r.getAttribute(`data-mc`).split(` `).filter(t=>t!==e&&t!==``).join(` `).trim();r.setAttribute(`data-mc`,t)}}}function M(e){if(A.has(e))return;A.add(e);let t=`./`+e.split(`-`).join(`/`)+`.js`,n=document.createElement(`script`);n.setAttribute(`src`,t),n.setAttribute(`blocking`,`render`),n.async=!0,n.setAttribute(`type`,`module`),n.setAttribute(`data-name`,e),n.setAttribute(`loading`,``),customElements.whenDefined(e).then(j(e)),n.addEventListener(`load`,t=>{A.delete(e),document.head.querySelector(`script[data-name="${e}"]`)?.remove()}),n.addEventListener(`error`,e=>{console.error(`could not load DC code from`,t)}),document.head.append(n)}function N(){[...document.querySelectorAll(`:not(:defined)`)].filter(e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!A.has(e.tagName.toLowerCase())).forEach(e=>{M(e.tagName.toLowerCase())}),[...document.querySelectorAll(`[data-mc]:not([data-mc=""]`)].filter(e=>!!e).forEach(e=>{(e.getAttribute(`data-mc`)?.split(` `).filter(e=>e!==``))?.forEach(e=>{let t=customElements.get(e);!A.has(e)&&!t?M(e):t&&j(e)()})})}var P=null;function F(e=!0){return e?P?!0:(P=new MutationObserver(N),setTimeout(()=>{P.observe(document.body,{childList:!0,subtree:!0}),N()},5),window.autoload??=F,!0):(P&&=(P.disconnect(),null),!1)}F.state=A;function I(e,t){return Object.defineProperty(t,"name",{value:e})}function ne(e){return class extends e{constructor(...e){super(...e)}}}function L(e,t,n=[],r){if(customElements.get(e)){console.warn(`IGNORED: Custom element "${e}" is already defined!`);return}if(!e.includes(`-`))throw Error(`createCustomElement: tagName must contain at least one hyphen ("-").`);let i=HTMLElement;r&&(i=document.createElement(r).constructor);let a=m(e);if(!(t.prototype instanceof D))return customElements.define(e,t),t;let o=I(a,class extends ne(i){constructor(e){super(),k.add(this,a,new t(this,e))}connectedCallback(){this.dispatchEvent(new CustomEvent(`_mcConnected`))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent(`_mcConnectedMove`))}disconnectedCallback(){this.dispatchEvent(new CustomEvent(`_mcDisconnected`))}adoptedCallback(){this.dispatchEvent(new CustomEvent(`_mcAdopted`))}attributeChangedCallback(e,t,n){this.dispatchEvent(new CustomEvent(`_mcAttributeChanged`,{detail:{name:e,oldValue:t,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent(`_mcFormReset`))}static get observedAttributes(){return[...n]}});return customElements.define(e,o,{extends:r}),L.list||=[],L.list.push(e),o}function R(e){return customElements.get(e)}function z(){return L.list??[]}function B(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?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=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var V=[`INPUT`,`SELECT`,`TEXTAREA`],H=class extends k{data={};oldDisplay=``;constructor(e){super(e),B(e).forEach(e=>this.data[e]=``),X(this),this.#attachCallbacks()}#attachCallbacks(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(e.getAttribute(t)??``))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=new Set((n.nodeValue??``).match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>i=>{let a=t;r.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(n.nodeValue??``)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!V.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function U(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!B(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function W(e){U(e).forEach(e=>{e?._mc?._placeholders||k.add(e,`_placeholders`,new H(e))})}function G(e){return typeof e==`object`&&!!e}var K={};function q(e){let t=e.constructor,n=t.name,r=class extends t{#notify=!0;#callbacks=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],G(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#callbacks}set callbacks(e){this.#callbacks=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#callbacks.push(e),this}unsubscribe(e){return this.#callbacks=this.#callbacks.filter(t=>t!==e),this}bind(e){if(s()){if(G(this.valueOf())){W(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#callbacks.push(function(e){let n=u(e);t.forEach(e=>{e&&o(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=G(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#notify=e),this.#notify&&this.#callbacks.forEach(e=>{e(t)}),this}};return K[n]=r,r}function J(e){return K[e.constructor.name]||q(e)}function Y(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function X(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!Y(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(J(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(G(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){d(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(G(a.valueOf())&&!(a.valueOf()instanceof Array))Y(a)||(a=new(J(e))(structuredClone(Object.assign({},e))),_(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(J(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function Z(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];Y(n)||X(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}Z(k);var re=e=>e.tagName.toLowerCase(),Q=class{constructor(e){}},ie=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.form?new FormData(this.#e.form).get(this.#e.name)??null:null}set val(e){let t=[...this.#e.form?.querySelectorAll(`input[type="radio"][name="${this.#e.name}"]`)??[]];t.filter(t=>t.getAttribute(`value`)===e).shift().checked=!0}},ae=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},oe=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},se=class extends Q{#e;#multi=!1;constructor(e){super(e),this.#e=e,this.#multi=e.multiple}get val(){let e=[];return[...this.#e.querySelectorAll(`option`)].filter(e=>e.selected).forEach(t=>{e.push(t.value)}),this.#multi?e:e[0]}set val(e){e=typeof e==`string`?[e]:e,[...this.#e.querySelectorAll(`option`)].forEach(t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1})}},ce=class extends Q{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},le=e=>{let t=[...(e||document).querySelectorAll(`input,select,textarea`)],n={};return t.forEach(e=>{let t=e.getAttribute(`name`);if(t){let r=!1;switch(re(e)){case`input`:switch(e.type){case`radio`:r=new ie(e);break;case`checkbox`:r=new ae(e);break;default:r=new oe(e)}break;case`select`:r=new se(e);break;case`textarea`:r=new ce(e);break}if(r){let i=r;k.add(e,t,i),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>i.val,set:e=>{i.val!==e&&(i.val=e)}})}}}),n};function $(e,t,n){if(!s())return;let r=le(n),i=e;i[t]=Object.assign({},r),X(e,t);let a=i[t];_(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function ue(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return $(this,t,e),this}})}export{a as BubbleController,k as DC,O as MC,D as McBase,F as autoload,x as bindTemplateEvents,_ as copyGettersSetters,h as debounce,d as deepEqual,L as defineCE,u as flattenObject,ue as formValuePlugin,$ as formValues,R as getCE,e as getMcEventName,g as htmlToElements,v as injectCSS,Y as isAlreadyObserved,s as isBrowser,S as isMcHost,c as isNativeObject,m as kebabToPascal,z as listCE,b as loadAssets,f as nameSpace,X as observe,Z as observePlugin,n as off,r as on,i as one,p as parse,y as processAssets,l as sortObject,o as trigger,t as trueEventName};
|
package/dist/observables.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(){return typeof window<`u`&&window.document!==void 0}function s(e){return typeof e==`object`&&!!e&&e.constructor===Object}function c(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];s(a)?t[i]=c(a):t[i]=a}return t}function l(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=l(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?c(n):n}function u(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!u(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!u(n[t],r[t]))return!1}return!0}function d(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}function f(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function p(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:f(document,t[i]);break;case`targetCss`:f(document,t[i]);break;case`shadowCss`:f(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],h(r,e);break;case`targetHtml`:n.innerHTML=t[i],h(n,e);break}})}function m(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function h(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function g(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function _(e,t,n={}){let r=e;`_mc`in e||(r._mc=new w(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function v(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function y(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function b(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function x(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function S(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var C=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof w&&this.constructor!==w){b(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&y(this)}}get target(){return this._target.deref()}},w=class e extends C{static tag;static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor,r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}if(n.assets.length&&m(r,n.assets).then(e=>{let t=Object.fromEntries(n.assets.map((t,n)=>[t,e[n]]));p(this,t),this.trigger(`assets`,t)}),n.tag===``){this.target.remove();return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])})}static add(e,t,n={}){return _(e,t,n)}static remove(e,t){v(e,t)}static get(e,t,n){if(!g(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=S(this.target,e);for(;n;)t.push(n),n=S(n.target,e);return t}closest(e){return S(this.target,e)}children(e){let t=x(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function T(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?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=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var E=[`INPUT`,`SELECT`,`TEXTAREA`],D=class extends w{data={};oldDisplay=``;constructor(e){super(e),T(e).forEach(e=>this.data[e]=``),F(this),this.#e()}#e(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(e.getAttribute(t)??``))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=new Set((n.nodeValue??``).match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>i=>{let a=t;r.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(n.nodeValue??``)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!E.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function O(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!T(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function k(e){O(e).forEach(e=>{e?._mc?._placeholders||w.add(e,`_placeholders`,new D(e))})}function A(e){return typeof e==`object`&&!!e}var j={};function M(e){let t=e.constructor,n=t.name,r=class extends t{#e=!0;#t=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],A(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#t}set callbacks(e){this.#t=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#t.push(e),this}unsubscribe(e){return this.#t=this.#t.filter(t=>t!==e),this}bind(e){if(o()){if(A(this.valueOf())){k(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#t.push(function(e){let n=l(e);t.forEach(e=>{e&&a(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=A(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#e=e),this.#e&&this.#t.forEach(e=>{e(t)}),this}};return j[n]=r,r}function N(e){return j[e.constructor.name]||M(e)}function P(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function F(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!P(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(N(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(A(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){u(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(A(a.valueOf())&&!(a.valueOf()instanceof Array))P(a)||(a=new(N(e))(structuredClone(Object.assign({},e))),d(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(N(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function I(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];P(n)||F(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}export{P as isAlreadyObserved,F as observe,I as observePlugin};
|
|
1
|
+
function e(e,t){let n=t.toLowerCase();return`on`+n in e?n:`_mc`+t[0].toUpperCase()+t.substring(1)}function t(n,r,i){if(n){if(typeof n==`string`){document.querySelectorAll(n).forEach(e=>t(e,r,i));return}n.removeEventListener(e(n,r),i)}}function n(t,r,i,a=!1){if(t){if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>n(e,r,i));return}return t.addEventListener(e(t,r),i,{capture:!1,once:a}),i}}function r(e,t,i){if(e){if(typeof e==`string`){document.querySelectorAll(e).forEach(e=>r(e,t,i));return}return n(e,t,i,!0),i}}var i=class{stopped=!1;constructor(){}stop(){this.stopped=!0}};function a(t,n,r={},o=`l`,s){if(!t)return;if(typeof t==`string`){document.querySelectorAll(t).forEach(e=>a(e,n,r,o));return}let c=/^_mc/.test(n)?n:e(t,n),l=s||new i,u=new CustomEvent(c,{detail:{data:r,control:l},bubbles:!1});l.stopped||/l/.test(o)&&(t.dispatchEvent(u),l.stopped)||/[ud]/.test(o)&&queueMicrotask(()=>{if(o.indexOf(`u`)>-1&&a(t.parentElement,c,r,`lu`,l),o.indexOf(`d`)>-1)for(let e of t.children)a(e,c,r,`ld`)})}function o(){return typeof window<`u`&&window.document!==void 0}function s(e){return typeof e==`object`&&!!e&&e.constructor===Object}function c(e){let t={},n=Object.keys(e).sort();for(let r=0;r<n.length;r++){let i=n[r],a=e[i];s(a)?t[i]=c(a):t[i]=a}return t}function l(e,t=!0){let n={},r=e,i=Object.getOwnPropertyNames(e);for(let e=0;e<i.length;e++){let t=i[e],a=r[t];if(a instanceof Object){let e=l(a,!1);for(let r in e)n[t+`.`+r]=e[r]}else n[t]=a}return t?c(n):n}function u(e,t){if(e===t||e!==e&&t!==t)return!0;if(typeof e!=`object`||!e||typeof t!=`object`||!t||e.constructor!==t.constructor)return!1;if(e instanceof Date)return e.getTime()===t.getTime();if(e instanceof RegExp)return e.toString()===t.toString();if(Array.isArray(e)){let n=t;if(e.length!==n.length)return!1;for(let t=0;t<e.length;t++)if(!u(e[t],n[t]))return!1;return!0}let n=e,r=t,i=Object.keys(n);if(i.length!==Object.keys(r).length)return!1;for(let e=0;e<i.length;e++){let t=i[e];if(!Object.prototype.hasOwnProperty.call(r,t)||!u(n[t],r[t]))return!1}return!0}function d(e,t){let n=Object.getOwnPropertyDescriptors(e);for(let[e,r]of Object.entries(n))(`get`in r||`set`in r)&&Object.defineProperty(t,e,r)}function f(e,t){let n=new CSSStyleSheet;return n.replaceSync(t),e.adoptedStyleSheets.push(n),n}function p(e,t){let n=e.target,r=n.shadowRoot;!r&&Object.keys(t).some(e=>e.indexOf(`shadow`)===0)&&(r=n.attachShadow({mode:`open`})),Object.keys(t).forEach(i=>{switch(i){case`css`:f(document,t[i]);break;case`targetCss`:f(document,t[i]);break;case`shadowCss`:f(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],h(r,e);break;case`targetHtml`:n.innerHTML=t[i],h(n,e);break}})}function m(e,t){let n=t=>{let n=t.match(/^([a-z]+)([A-Z][a-z]*)$/);return n?`./${e.replace(/-/g,`/`)}.${n[1]}.${n[2].toLowerCase()}`:`./${e.replace(/-/g,`/`)}.${t.toLowerCase()}`};return Promise.all(t.map(async e=>{let t=n(e);try{let n=await fetch(t);if(!n.ok)return`file not found: ${t}`;if(t.endsWith(`json`)){let r=await n.text();try{return JSON.parse(r)}catch{return console.error(`could not JSON.parse() asset '${e}' from ${t}:\n`,r),null}}return n.text()}catch{return`file not found: ${t}`}}))}function h(e,t){let r=[...e.querySelectorAll(`*`)];for(let e of r){if(!(e instanceof HTMLElement))continue;let r=[...e.attributes];for(let i of r){let r=i.name.toLowerCase();if(!(`on`+r in e))continue;let o=i.value.trim().split(`|`);if(o.length<2)continue;let[s,c,l]=o;e.removeAttribute(i.name);let u;if(l)try{u=JSON.parse(l)}catch{u=l}s===`this`||s===``?n(e,r,()=>t.trigger(c,u)):n(e,r,()=>a(s,c,u))}}}function g(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function _(e,t,n={}){let r=e;`_mc`in e||(r._mc=new w(e));let i=r._mc;return t.length&&!i[t]&&(i[t]=n,e instanceof HTMLElement&&!e.getAttribute(`data-mc`)&&e.setAttribute(`data-mc`,``)),r}function v(e,t){if(!t)return;let n=e._mc;n&&(n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute(`data-mc`)&&e.removeAttribute(`data-mc`))}function y(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function b(e){let t=e.target,r=Object.getPrototypeOf(e),i=e,a=Object.getOwnPropertyNames(r).filter(e=>/^(on[A-Z]|one[A-Z])/.test(e)&&typeof r[e]==`function`);for(let e of a){let r=/^one/.test(e);n(t,e.replace(/^one?/,``),t=>i[e](t),r)}}function x(e){return Array.from(e.querySelectorAll(`[data-mc]:not(:scope [data-mc] [data-mc])`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc)}function S(e,t){let n=e.parentElement?.closest(`[data-mc]`);for(;n instanceof HTMLElement;){if(`_mc`in n){let e=n._mc;if(t===void 0||t in e)return e}n=n.parentElement?.closest(`[data-mc]`)}return null}var C=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof w&&this.constructor!==w){b(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&y(this)}}get target(){return this._target.deref()}},w=class e extends C{static tag;static _assets={};static assets=[];static attributes={};constructor(t){super(t);let n=this.constructor;if(n===e)return;let r=this.target.tagName.toLowerCase();if(n.tag!==void 0&&r!==n.tag&&n.tag!==``){let t=document.createElement(n.tag);t.classList.add(r),e.add(t,n.name,new n(t)),r.includes(`-`)&&!this.target.isConnected?this.on(`connected`,()=>this.target.replaceWith(t)):this.target.replaceWith(t);return}let i=n.attributes;n.attributes&&Object.keys(n.attributes).forEach(e=>{this.target.setAttribute(e,i[e])});let a=n.assets.filter(e=>!n._assets[e]),o=this;if(n.hasOwnProperty(`_assets`)?p(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?m(r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),p(this,t),n._assets=Object.assign({},n._assets,t),o.trigger(`assets`,n._assets)}):[...Object.keys(n._assets)].length&&queueMicrotask(()=>o.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return _(e,t,n)}static remove(e,t){v(e,t)}static get(e,t,n){if(!g(e))return;let r=e._mc[t];return r instanceof n?r:void 0}off(e,n){t(this.target,e,n)}on(e,t){return n(this.target,e,t)}one(e,t){return r(this.target,e,t)}trigger(e,t={},n=`l`,r){a(this.target,e,t,n,r)}ancestors(e){let t=[],n=S(this.target,e);for(;n;)t.push(n),n=S(n.target,e);return t}closest(e){return S(this.target,e)}children(e){let t=x(this.target);return e===void 0?t:t.filter(t=>e in t)}descendants(e){return Array.from(this.target.querySelectorAll(`[data-mc]`)).filter(e=>e instanceof HTMLElement&&`_mc`in e).map(e=>e._mc).filter(t=>e===void 0||e in t)}};function T(e){let t=new Set,n=/\{[^\{\}]*\}/g;return(e.getAttributeNames?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=>e.nodeType===3&&(e.nodeValue||``).match(n)).forEach(e=>{(e?.nodeValue||``).match(n).forEach(e=>t.add(e.replace(/[\{\}]/g,``)))}),[...t]}var E=[`INPUT`,`SELECT`,`TEXTAREA`],D=class extends w{data={};oldDisplay=``;constructor(e){super(e),T(e).forEach(e=>this.data[e]=``),F(this),this.#attachCallbacks()}#attachCallbacks(){let e=this.target,t=!1;(e.getAttributeNames?e.getAttributeNames():[]).filter(t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g)).forEach(t=>{let n=new Set(e.getAttribute(t)?.match(/\{[^\{\}]*\}/g));this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(e.getAttribute(t)??``))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=new Set((n.nodeValue??``).match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>i=>{let a=t;r.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(n.nodeValue??``)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!E.includes(e.tagName)&&e.tagName!==`FIELDSET`&&(e.style.display=`none`)})}onData(e){let t={};Object.keys(e.detail.data).forEach(n=>{this.data.hasOwnProperty(n)&&(t[n]=e.detail.data[n])}),JSON.stringify(t)!==JSON.stringify(this.data)&&Object.assign(this.data,t)}};function O(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!T(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function k(e){O(e).forEach(e=>{e?._mc?._placeholders||w.add(e,`_placeholders`,new D(e))})}function A(e){return typeof e==`object`&&!!e}var j={};function M(e){let t=e.constructor,n=t.name,r=class extends t{#notify=!0;#callbacks=[];constructor(e){super(e);let t=this.constructor;t.callbacks=[],A(e)&&Object.getOwnPropertyNames(e).forEach(t=>{this[t]=e[t]})}get callbacks(){return this.#callbacks}set callbacks(e){this.#callbacks=e}[Symbol.toPrimitive](e){let t=this.valueOf();return e===`string`?String(t):e===`number`?Number(t):t}subscribe(e){return this.#callbacks.push(e),this}unsubscribe(e){return this.#callbacks=this.#callbacks.filter(t=>t!==e),this}bind(e){if(o()){if(A(this.valueOf())){k(e);let t=[e,...e.querySelectorAll(`[data-mc]`)].filter(e=>!!e?._mc?._placeholders);this.#callbacks.push(function(e){let n=l(e);t.forEach(e=>{e&&a(e,`data`,n)})}),this.notify()}else console.warn(`IGNORED - cannot bind a non-Object to the dom, IS:`,typeof this.valueOf(),this);return this}}notify(e){let t=A(this.valueOf())&&!(this.valueOf()instanceof Array)?structuredClone(Object.assign({},this)):this.valueOf();return e!==void 0&&(this.#notify=e),this.#notify&&this.#callbacks.forEach(e=>{e(t)}),this}};return j[n]=r,r}function N(e){return j[e.constructor.name]||M(e)}function P(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function F(e,t){let n=e;return(t?[t]:[...Object.getOwnPropertyNames(e)]).forEach(t=>{let r=n[t];if(Object.prototype.hasOwnProperty.call(e,t)&&typeof r!=`function`&&!P(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(N(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(A(a.valueOf())){let e=structuredClone(Object.assign({},a));queueMicrotask(function(){u(structuredClone(Object.assign({},a)),e)||o()})}return a},set(e){if(typeof e==typeof a.valueOf())if(A(a.valueOf())&&!(a.valueOf()instanceof Array))P(a)||(a=new(N(e))(structuredClone(Object.assign({},e))),d(e,a)),Object.assign(a,e),a.notify();else{let t=a.valueOf(),n=a.callbacks;e!==t&&(a=new(N(e))(e),a.callbacks=n,o())}else console.warn(`IGNORED - cannot change observable types, IS:`,typeof a.valueOf(),a,`- CANNOT BECOME:`,typeof e)}}),n[t]=i}}),e}function I(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];P(n)||F(e,t)}Object.hasOwn(t,`notify`)||Object.assign(t,{notify:function(e){return n(this,e),this[e].notify(),this},subscribe:function(e,t){return n(this,e),this[e].subscribe(t),this},bind:function(e,t){return n(this,e),this[e].bind(t),this}})}export{P as isAlreadyObserved,F as observe,I as observePlugin};
|
|
@@ -36,6 +36,8 @@ state.formData.role = 'admin'; // writes back to the <select> control
|
|
|
36
36
|
```
|
|
37
37
|
*/
|
|
38
38
|
/**
|
|
39
|
+
@hidden
|
|
40
|
+
|
|
39
41
|
Attaches a form-values observable to a target object property, enabling two-way binding
|
|
40
42
|
between DOM form controls and the object's state.
|
|
41
43
|
|
|
@@ -84,7 +86,7 @@ This plugin also pulls in all observable methods from {@link observePlugin} —
|
|
|
84
86
|
Call it once at module level before defining any component classes. The plugin is idempotent —
|
|
85
87
|
subsequent calls are no-ops.
|
|
86
88
|
|
|
87
|
-
@param Class - A constructor function whose prototype chain includes {@link McBase}.
|
|
89
|
+
@param Class - A constructor function whose prototype chain includes {@link Core.McBase}.
|
|
88
90
|
|
|
89
91
|
@example
|
|
90
92
|
```ts
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../../src/state/formValues.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCE;AA8SF
|
|
1
|
+
{"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../../src/state/formValues.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCE;AA8SF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuCE;AACF,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAC1C,YAAY,EAAE,CAAC,EACf,YAAY,EAAE,MAAM,CAAC,GAAG,MAAM,EAC9B,GAAG,EAAE,WAAW,GAAG,UAAU,QAuB7B;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+BE;AACF,wBAAgB,eAAe,CAAC,KAAK,EAAE,GAAG,QA2BzC;AAED,OAAO,QAAQ,YAAY,CAAC;IAC3B,UAAiB,MAAM,CAAC,OAAO,SAAS,MAAM,GAAG,MAAM;QACtD,UAAU,CAAC,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI,CAAC;KACnD;CACD"}
|
package/dist/state/formValues.js
CHANGED
|
@@ -285,6 +285,8 @@ const getInputHandlers = (e) => {
|
|
|
285
285
|
return handlers;
|
|
286
286
|
};
|
|
287
287
|
/**
|
|
288
|
+
@hidden
|
|
289
|
+
|
|
288
290
|
Attaches a form-values observable to a target object property, enabling two-way binding
|
|
289
291
|
between DOM form controls and the object's state.
|
|
290
292
|
|
|
@@ -350,7 +352,7 @@ This plugin also pulls in all observable methods from {@link observePlugin} —
|
|
|
350
352
|
Call it once at module level before defining any component classes. The plugin is idempotent —
|
|
351
353
|
subsequent calls are no-ops.
|
|
352
354
|
|
|
353
|
-
@param Class - A constructor function whose prototype chain includes {@link McBase}.
|
|
355
|
+
@param Class - A constructor function whose prototype chain includes {@link Core.McBase}.
|
|
354
356
|
|
|
355
357
|
@example
|
|
356
358
|
```ts
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
/**
|
|
2
|
+
@module State
|
|
3
|
+
*/
|
|
4
|
+
export { observe, observePlugin, isAlreadyObserved } from './observables.js';
|
|
5
|
+
export type { Observable, Callback, Observed, ObservedKey, Unobserved } from './observables.js';
|
|
6
|
+
export { formValues, formValuePlugin } from './formValues.js';
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/state/index.ts"],"names":[],"mappings":"AAAA;;EAEE;AACF,OAAO,EAAE,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,MAAM,kBAAkB,CAAC;AAC7E,YAAY,EAAE,UAAU,EAAE,QAAQ,EAAE,QAAQ,EAAE,WAAW,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAChG,OAAO,EAAE,UAAU,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC"}
|