@twobirds/microcomponents 0.2.5 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (55) hide show
  1. package/README.md +91 -34
  2. package/dist/MC.min.js +1 -1
  3. package/dist/autoload.min.js +1 -1
  4. package/dist/cli/create.d.ts +53 -0
  5. package/dist/cli/create.d.ts.map +1 -0
  6. package/dist/cli/create.js +419 -0
  7. package/dist/cli/dispatch.d.ts +43 -0
  8. package/dist/cli/dispatch.d.ts.map +1 -0
  9. package/dist/cli/dispatch.js +251 -0
  10. package/dist/cli/index.d.ts +12 -0
  11. package/dist/cli/index.d.ts.map +1 -0
  12. package/dist/cli/index.js +12 -0
  13. package/dist/cli/scaffold.d.ts +68 -0
  14. package/dist/cli/scaffold.d.ts.map +1 -0
  15. package/dist/cli/scaffold.js +109 -0
  16. package/dist/cli/writeScaffold.d.ts +37 -0
  17. package/dist/cli/writeScaffold.d.ts.map +1 -0
  18. package/dist/cli/writeScaffold.js +60 -0
  19. package/dist/core/MC.d.ts +50 -9
  20. package/dist/core/MC.d.ts.map +1 -1
  21. package/dist/core/MC.js +78 -33
  22. package/dist/core/elements.d.ts +11 -8
  23. package/dist/core/elements.d.ts.map +1 -1
  24. package/dist/core/elements.js +12 -7
  25. package/dist/core/mcGuards.d.ts +2 -2
  26. package/dist/elements.min.js +1 -1
  27. package/dist/formValues.min.js +1 -1
  28. package/dist/microcomponents.min.js +1 -1
  29. package/dist/observables.min.js +1 -1
  30. package/dist/state/formValues.d.ts +11 -5
  31. package/dist/state/formValues.d.ts.map +1 -1
  32. package/dist/state/formValues.js +18 -11
  33. package/dist/state/observables.d.ts +30 -13
  34. package/dist/state/observables.d.ts.map +1 -1
  35. package/dist/state/observables.js +64 -35
  36. package/dist/state/placeholders.d.ts.map +1 -1
  37. package/dist/state/placeholders.js +16 -11
  38. package/dist/types/mcTypes.d.ts +16 -7
  39. package/dist/types/mcTypes.d.ts.map +1 -1
  40. package/dist/utils/autoload.d.ts +6 -3
  41. package/dist/utils/autoload.d.ts.map +1 -1
  42. package/dist/utils/autoload.js +2 -2
  43. package/dist/utils/events.d.ts +21 -28
  44. package/dist/utils/events.d.ts.map +1 -1
  45. package/dist/utils/events.js +23 -29
  46. package/dist/utils/helpers.d.ts +19 -19
  47. package/dist/utils/helpers.d.ts.map +1 -1
  48. package/dist/utils/helpers.js +19 -19
  49. package/dist/utils/index.d.ts +2 -2
  50. package/dist/utils/index.d.ts.map +1 -1
  51. package/dist/utils/index.js +2 -2
  52. package/dist/utils/resolveComponentPath.d.ts +36 -0
  53. package/dist/utils/resolveComponentPath.d.ts.map +1 -0
  54. package/dist/utils/resolveComponentPath.js +39 -0
  55. package/package.json +20 -13
package/dist/core/MC.d.ts CHANGED
@@ -45,13 +45,13 @@ work by assigning methods onto `McBase.prototype` (reached via
45
45
  ```ts
46
46
  import { DC, observePlugin, formValuePlugin } from '@twobirds/microcomponents';
47
47
 
48
- observePlugin(DC); // adds notify(), subscribe(), bind() to McBase.prototype
49
- formValuePlugin(DC); // adds formValues() (and re-runs observePlugin)
48
+ observePlugin(DC);
49
+ formValuePlugin(DC);
50
50
 
51
51
  class MyForm extends DC {
52
52
  data = { name: '' };
53
53
 
54
- oneInit() { // runs once after the constructor
54
+ oneInit() {
55
55
  this
56
56
  .formValues(this.target, 'data')
57
57
  .subscribe('data', (v) => console.log(v))
@@ -59,6 +59,10 @@ class MyForm extends DC {
59
59
  }
60
60
  }
61
61
  ```
62
+
63
+ `observePlugin(DC)` adds `notify()`, `subscribe()`, `bind()` to `McBase.prototype`;
64
+ `formValuePlugin(DC)` adds `formValues()` and re-runs `observePlugin`. `oneInit()`
65
+ runs once after the constructor.
62
66
  @group Micro Components
63
67
  */
64
68
  declare class McBase<TTarget extends object = object> {
@@ -170,6 +174,27 @@ global side effects, they are processed only once — after the first instance l
170
174
  the entries are removed from both `static assets` and `static _assets`. Subsequent
171
175
  instances skip loading and re-processing them entirely.
172
176
 
177
+ **CSS file roles**:
178
+
179
+ - `.css` — design tokens only (CSS custom-property presets). Injected into the document
180
+ scope once, like `targetCss`.
181
+ - `.target.css` — layout rules for the light DOM. Also document-scoped and one-time.
182
+ - `.shadow.css` — layout rules for the shadow DOM. Injected per instance into the
183
+ component's own shadow root, so each instance gets its own copy.
184
+
185
+ Every declared asset — CSS, HTML, JSON — is inlined into `static _assets` at build time by
186
+ the load-assets plugin, so a bundled build performs no fetches at all.
187
+
188
+ In a bundled build the plain `.css` files are additionally concatenated into a single
189
+ `bundle.css` by the bundling script. That file is a convenience listing of the available
190
+ variables: copy the ones you want to change into your own stylesheet and override them
191
+ there. It is not required at runtime, and it cannot drift from the inlined presets — both
192
+ are read from the same source files.
193
+
194
+ The runtime decides whether an asset still needs fetching with `!ctor._assets[key]`, so an
195
+ inlined entry must never be an empty string: that would trigger a re-fetch of a file that
196
+ does not exist in a bundled build.
197
+
173
198
  @example static assets with autoload
174
199
 
175
200
  ```ts
@@ -178,12 +203,14 @@ class CartCheckout extends DC {
178
203
 
179
204
  oneAssets(ev) {
180
205
  const { configJson } = ev.detail.data;
181
- console.log(configJson); // parsed JSON object
206
+ console.log(configJson);
182
207
  }
183
208
  }
184
209
  defineCE('cart-checkout', CartCheckout);
185
210
  ```
186
211
 
212
+ `configJson` arrives already parsed into an object.
213
+
187
214
  ### `static attributes?: object`
188
215
 
189
216
  Sets HTML attributes on every instance automatically.
@@ -272,9 +299,10 @@ defineCE('my-element', MyElement);
272
299
  ```ts
273
300
  class MyElement extends DC {}
274
301
  defineCE('my-element', MyElement);
275
- // Use in HTML: <my-element></my-element>
276
302
  ```
277
303
 
304
+ The registered element is then used in HTML as `<my-element></my-element>`.
305
+
278
306
  ### Programmatic construction with data
279
307
 
280
308
  When constructing programmatically via {@link getCE}, pass only the `data` payload —
@@ -311,9 +339,10 @@ class MyElement extends DC {
311
339
  }
312
340
  }
313
341
  defineCE('my-element', MyElement);
314
- // Use in HTML: <my-element my-data='{"name":"John"}'></my-element>
315
342
  ```
316
343
 
344
+ Used in HTML as `<my-element my-data='{"name":"John"}'></my-element>`.
345
+
317
346
  ---
318
347
 
319
348
  ## Plugin Extension Points
@@ -334,11 +363,14 @@ plugins. See the {@link McBase} documentation for details on {@link State.observ
334
363
  ```ts
335
364
  class Cart extends DC<HTMLFormElement, { CartUpdate: { count: number } }> {
336
365
  checkout() {
337
- this.trigger('CartUpdate', { count: 2 }, 'u'); // payload checked
338
- this.on('CartUpdate', (ev) => ev.detail.data.count); // ev fully typed
366
+ this.trigger('CartUpdate', { count: 2 }, 'u');
367
+ this.on('CartUpdate', (ev) => ev.detail.data.count);
339
368
  }
340
369
  }
341
370
  ```
371
+
372
+ `trigger()` checks the payload against the registered `CartUpdate` shape, and the `on()`
373
+ handler receives a fully typed `ev`.
342
374
  @group Micro Components
343
375
  */
344
376
  declare class DC<T extends HTMLElement = HTMLElement, EM extends Record<string, unknown> = Record<never, never>> extends McBase<T> implements McController<T> {
@@ -357,6 +389,12 @@ declare class DC<T extends HTMLElement = HTMLElement, EM extends Record<string,
357
389
  * Asset names are camelCase and translated into file extensions: `'targetHtml'` → `.target.html`.
358
390
  */
359
391
  static assets: string[];
392
+ /**
393
+ * In-flight asset request, cached per class so that instances constructed while
394
+ * the first fetch is still pending (e.g. in a loop) share a single request
395
+ * instead of each triggering their own. Resolves to the freshly loaded assets.
396
+ */
397
+ static _assetsPromise?: Promise<Record<string, any>>;
360
398
  /**
361
399
  * Sets HTML attributes on every instance automatically.
362
400
  * Example: `{ role: 'listitem', 'aria-label': 'nav' }`.
@@ -420,8 +458,11 @@ declare class DC<T extends HTMLElement = HTMLElement, EM extends Record<string,
420
458
  @example
421
459
  ```ts
422
460
  const cart = DC.get(document.querySelector('form'), 'cart', Cart);
423
- cart?.addItem(item); // Cart | undefined — no global declaration involved
461
+ cart?.addItem(item);
424
462
  ```
463
+
464
+ `cart` is `Cart | undefined` — presence and type identity are both proven by the
465
+ `instanceof` check inside `get()`, with no global declaration involved.
425
466
  */
426
467
  static get<E extends object>(element: unknown, key: string, elementMcClass: abstract new (...args: never[]) => E): E | undefined;
427
468
  off<D = unknown, K extends string = string>(eventName: K, handler: McEventHandler<McPayloadOf<EM, K, D>>): void;
@@ -1 +1 @@
1
- {"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../../src/core/MC.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"MC.d.ts","sourceRoot":"","sources":["../../src/core/MC.ts"],"names":[],"mappings":"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"}
package/dist/core/MC.js CHANGED
@@ -173,13 +173,13 @@ work by assigning methods onto `McBase.prototype` (reached via
173
173
  ```ts
174
174
  import { DC, observePlugin, formValuePlugin } from '@twobirds/microcomponents';
175
175
 
176
- observePlugin(DC); // adds notify(), subscribe(), bind() to McBase.prototype
177
- formValuePlugin(DC); // adds formValues() (and re-runs observePlugin)
176
+ observePlugin(DC);
177
+ formValuePlugin(DC);
178
178
 
179
179
  class MyForm extends DC {
180
180
  data = { name: '' };
181
181
 
182
- oneInit() { // runs once after the constructor
182
+ oneInit() {
183
183
  this
184
184
  .formValues(this.target, 'data')
185
185
  .subscribe('data', (v) => console.log(v))
@@ -187,6 +187,10 @@ class MyForm extends DC {
187
187
  }
188
188
  }
189
189
  ```
190
+
191
+ `observePlugin(DC)` adds `notify()`, `subscribe()`, `bind()` to `McBase.prototype`;
192
+ `formValuePlugin(DC)` adds `formValues()` and re-runs `observePlugin`. `oneInit()`
193
+ runs once after the constructor.
190
194
  @group Micro Components
191
195
  */
192
196
  class McBase {
@@ -207,7 +211,6 @@ class McBase {
207
211
  if (tag === undefined || tag.toUpperCase() === this.target.tagName) {
208
212
  init(this);
209
213
  }
210
- ;
211
214
  }
212
215
  }
213
216
  /**
@@ -312,6 +315,27 @@ global side effects, they are processed only once — after the first instance l
312
315
  the entries are removed from both `static assets` and `static _assets`. Subsequent
313
316
  instances skip loading and re-processing them entirely.
314
317
 
318
+ **CSS file roles**:
319
+
320
+ - `.css` — design tokens only (CSS custom-property presets). Injected into the document
321
+ scope once, like `targetCss`.
322
+ - `.target.css` — layout rules for the light DOM. Also document-scoped and one-time.
323
+ - `.shadow.css` — layout rules for the shadow DOM. Injected per instance into the
324
+ component's own shadow root, so each instance gets its own copy.
325
+
326
+ Every declared asset — CSS, HTML, JSON — is inlined into `static _assets` at build time by
327
+ the load-assets plugin, so a bundled build performs no fetches at all.
328
+
329
+ In a bundled build the plain `.css` files are additionally concatenated into a single
330
+ `bundle.css` by the bundling script. That file is a convenience listing of the available
331
+ variables: copy the ones you want to change into your own stylesheet and override them
332
+ there. It is not required at runtime, and it cannot drift from the inlined presets — both
333
+ are read from the same source files.
334
+
335
+ The runtime decides whether an asset still needs fetching with `!ctor._assets[key]`, so an
336
+ inlined entry must never be an empty string: that would trigger a re-fetch of a file that
337
+ does not exist in a bundled build.
338
+
315
339
  @example static assets with autoload
316
340
 
317
341
  ```ts
@@ -320,12 +344,14 @@ class CartCheckout extends DC {
320
344
 
321
345
  oneAssets(ev) {
322
346
  const { configJson } = ev.detail.data;
323
- console.log(configJson); // parsed JSON object
347
+ console.log(configJson);
324
348
  }
325
349
  }
326
350
  defineCE('cart-checkout', CartCheckout);
327
351
  ```
328
352
 
353
+ `configJson` arrives already parsed into an object.
354
+
329
355
  ### `static attributes?: object`
330
356
 
331
357
  Sets HTML attributes on every instance automatically.
@@ -414,9 +440,10 @@ defineCE('my-element', MyElement);
414
440
  ```ts
415
441
  class MyElement extends DC {}
416
442
  defineCE('my-element', MyElement);
417
- // Use in HTML: <my-element></my-element>
418
443
  ```
419
444
 
445
+ The registered element is then used in HTML as `<my-element></my-element>`.
446
+
420
447
  ### Programmatic construction with data
421
448
 
422
449
  When constructing programmatically via {@link getCE}, pass only the `data` payload —
@@ -453,9 +480,10 @@ class MyElement extends DC {
453
480
  }
454
481
  }
455
482
  defineCE('my-element', MyElement);
456
- // Use in HTML: <my-element my-data='{"name":"John"}'></my-element>
457
483
  ```
458
484
 
485
+ Used in HTML as `<my-element my-data='{"name":"John"}'></my-element>`.
486
+
459
487
  ---
460
488
 
461
489
  ## Plugin Extension Points
@@ -476,11 +504,14 @@ plugins. See the {@link McBase} documentation for details on {@link State.observ
476
504
  ```ts
477
505
  class Cart extends DC<HTMLFormElement, { CartUpdate: { count: number } }> {
478
506
  checkout() {
479
- this.trigger('CartUpdate', { count: 2 }, 'u'); // payload checked
480
- this.on('CartUpdate', (ev) => ev.detail.data.count); // ev fully typed
507
+ this.trigger('CartUpdate', { count: 2 }, 'u');
508
+ this.on('CartUpdate', (ev) => ev.detail.data.count);
481
509
  }
482
510
  }
483
511
  ```
512
+
513
+ `trigger()` checks the payload against the registered `CartUpdate` shape, and the `on()`
514
+ handler receives a fully typed `ev`.
484
515
  @group Micro Components
485
516
  */
486
517
  class DC extends McBase {
@@ -499,6 +530,12 @@ class DC extends McBase {
499
530
  * Asset names are camelCase and translated into file extensions: `'targetHtml'` → `.target.html`.
500
531
  */
501
532
  static assets = [];
533
+ /**
534
+ * In-flight asset request, cached per class so that instances constructed while
535
+ * the first fetch is still pending (e.g. in a loop) share a single request
536
+ * instead of each triggering their own. Resolves to the freshly loaded assets.
537
+ */
538
+ static _assetsPromise;
502
539
  /**
503
540
  * Sets HTML attributes on every instance automatically.
504
541
  * Example: `{ role: 'listitem', 'aria-label': 'nav' }`.
@@ -548,35 +585,41 @@ class DC extends McBase {
548
585
  /*
549
586
  work on assets
550
587
  */
551
- // if predefined assets exist get list of not pre-defined ones
552
- const remainingAssets = ctor.assets.filter((key) => !ctor._assets[key]);
553
588
  // oxlint-disable-next-line typescript/no-this-alias
554
589
  const that = this;
555
- // process existing assets
556
- if (ctor.hasOwnProperty('_assets')) {
590
+ // assets not yet present in the class-level cache still need fetching
591
+ const remainingAssets = ctor.assets.filter((key) => !ctor._assets[key]);
592
+ // apply any assets already cached (preloaded by the build plugin, or loaded
593
+ // by an earlier instance) to THIS instance's target
594
+ if (Object.keys(ctor._assets).length) {
557
595
  processAssets(this, ctor._assets);
558
596
  }
559
- else if (ctor.assets.length && !ctor.hasOwnProperty('_assets')) {
560
- ctor._assets = {};
561
- }
562
- // autoload and process remaining assets
563
597
  if (remainingAssets.length) {
564
- const elementName = ctor._originalTag || tagName;
565
- loadAssets(elementName, remainingAssets)
566
- .then((res) => {
567
- const loadedAssets = {};
568
- remainingAssets.forEach((key, i) => {
569
- loadedAssets[key] = res[i];
598
+ // fetch once per class: the first instance starts the request and every
599
+ // instance created while it is still in flight (e.g. in a loop) reuses the
600
+ // same promise instead of firing a duplicate fetch
601
+ if (!ctor._assetsPromise) {
602
+ const elementName = ctor._originalTag || tagName;
603
+ ctor._assetsPromise = loadAssets(elementName, remainingAssets).then((res) => {
604
+ const loadedAssets = {};
605
+ remainingAssets.forEach((key, i) => {
606
+ loadedAssets[key] = res[i];
607
+ });
608
+ ctor._assets = Object.assign({}, ctor._assets, loadedAssets);
609
+ // one-time global styles: remove 'css' and 'targetCss' from both assets and _assets
610
+ for (const onceKey of ['css', 'targetCss']) {
611
+ if (loadedAssets[onceKey] !== undefined) {
612
+ delete ctor._assets[onceKey];
613
+ }
614
+ }
615
+ ctor.assets = ctor.assets.filter((key) => key !== 'css' && key !== 'targetCss');
616
+ return loadedAssets;
570
617
  });
618
+ }
619
+ // each instance applies the freshly loaded assets to its own target,
620
+ // then fires the assets event with the merged cache
621
+ ctor._assetsPromise.then((loadedAssets) => {
571
622
  processAssets(this, loadedAssets);
572
- ctor._assets = Object.assign({}, ctor._assets, loadedAssets);
573
- // one-time global styles: remove 'css' and 'targetCss' from both assets and _assets
574
- for (const onceKey of ['css', 'targetCss']) {
575
- if (loadedAssets[onceKey] !== undefined) {
576
- delete ctor._assets[onceKey];
577
- }
578
- }
579
- ctor.assets = ctor.assets.filter((key) => key !== 'css' && key !== 'targetCss');
580
623
  that.trigger('assets', ctor._assets);
581
624
  });
582
625
  }
@@ -588,7 +631,6 @@ class DC extends McBase {
588
631
  this.target.remove();
589
632
  return;
590
633
  }
591
- ;
592
634
  }
593
635
  /**
594
636
  Returns the loaded assets for this component instance.
@@ -651,8 +693,11 @@ class DC extends McBase {
651
693
  @example
652
694
  ```ts
653
695
  const cart = DC.get(document.querySelector('form'), 'cart', Cart);
654
- cart?.addItem(item); // Cart | undefined — no global declaration involved
696
+ cart?.addItem(item);
655
697
  ```
698
+
699
+ `cart` is `Cart | undefined` — presence and type identity are both proven by the
700
+ `instanceof` check inside `get()`, with no global declaration involved.
656
701
  */
657
702
  static get(element, key, elementMcClass) {
658
703
  if (!isMcHost(element))
@@ -21,9 +21,10 @@ construction patterns), see the {@link DC} class in `MC.ts`.
21
21
  ```ts
22
22
  class MyElement extends DC {}
23
23
  defineCE('my-element', MyElement);
24
- // Use in HTML: <my-element></my-element>
25
24
  ```
26
25
 
26
+ The registered element is then used in HTML as `<my-element></my-element>`.
27
+
27
28
  @example Retrieve custom element from registry
28
29
 
29
30
  ```ts
@@ -38,7 +39,7 @@ if (MyElementClass) {
38
39
  ```ts
39
40
  defineCE('my-element', MyElement);
40
41
  defineCE('another-widget', AnotherWidget);
41
- console.log(listCE()); // ['my-element', 'another-widget']
42
+ console.log(listCE());
42
43
  ```
43
44
  */
44
45
  import { type McHost } from './MC.js';
@@ -49,9 +50,11 @@ plain `HTMLElement` otherwise.
49
50
 
50
51
  @example
51
52
  ```ts
52
- type Btn = TargetOf<'button'>; // HTMLButtonElement
53
- type Plain = TargetOf<'div'>; // HTMLElement
53
+ type Btn = TargetOf<'button'>;
54
+ type Plain = TargetOf<'div'>;
54
55
  ```
56
+
57
+ `Btn` resolves to `HTMLButtonElement`, `Plain` to plain `HTMLElement`.
55
58
  @group Types
56
59
  */
57
60
  export type TargetOf<E> = E extends keyof HTMLElementTagNameMap ? HTMLElementTagNameMap[E] : HTMLElement;
@@ -94,10 +97,10 @@ declare global {
94
97
  }
95
98
  }
96
99
 
97
- const Ctor = getCE('user-card'); // typed — no cast
100
+ const Ctor = getCE('user-card');
98
101
  if (Ctor) {
99
- const card = new Ctor({ initial: 1 }); // payload checked
100
- card._mc.UserCard; // UserCard
102
+ const card = new Ctor({ initial: 1 });
103
+ console.log(card._mc.UserCard);
101
104
  }
102
105
  ```
103
106
  */
@@ -137,7 +140,7 @@ Returns an array of all tag names registered via {@link defineCE}.
137
140
  ```ts
138
141
  defineCE('my-element', MyElement);
139
142
  defineCE('another-widget', AnotherWidget);
140
- console.log(listCE()); // ['my-element', 'another-widget']
143
+ console.log(listCE());
141
144
  ```
142
145
  @group Elements
143
146
  */
@@ -1 +1 @@
1
- {"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../src/core/elements.ts"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../../src/core/elements.ts"],"names":[],"mappings":"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"}
@@ -21,9 +21,10 @@ construction patterns), see the {@link DC} class in `MC.ts`.
21
21
  ```ts
22
22
  class MyElement extends DC {}
23
23
  defineCE('my-element', MyElement);
24
- // Use in HTML: <my-element></my-element>
25
24
  ```
26
25
 
26
+ The registered element is then used in HTML as `<my-element></my-element>`.
27
+
27
28
  @example Retrieve custom element from registry
28
29
 
29
30
  ```ts
@@ -38,7 +39,7 @@ if (MyElementClass) {
38
39
  ```ts
39
40
  defineCE('my-element', MyElement);
40
41
  defineCE('another-widget', AnotherWidget);
41
- console.log(listCE()); // ['my-element', 'another-widget']
42
+ console.log(listCE());
42
43
  ```
43
44
  */
44
45
  import { kebabToPascal } from '../utils/helpers.js';
@@ -52,7 +53,7 @@ Creates a named class constructor with the specified name.
52
53
  @example
53
54
  ```ts
54
55
  const MyNamedClass = createNamedClass('MyNamedClass', class { });
55
- console.log(MyNamedClass.name); // 'MyNamedClass'
56
+ console.log(MyNamedClass.name);
56
57
  ```
57
58
  */
58
59
  function createNamedClass(name, targetClass) {
@@ -74,8 +75,10 @@ function Base(ElementClass) {
74
75
  ```ts
75
76
  class MyElement extends DC {}
76
77
  defineCE('my-element', MyElement);
77
- // Use in HTML: <my-element></my-element>
78
78
  ```
79
+
80
+ The registered element is then used in HTML as `<my-element></my-element>`.
81
+
79
82
  #### Define custom element in registry with observed attributes
80
83
 
81
84
  ```ts
@@ -85,10 +88,12 @@ class MyElement extends DC {
85
88
  }
86
89
  }
87
90
  defineCE('my-element', MyElement, ['observed']);
88
- // Use in HTML: <my-element observed></my-element>
89
- // When the 'observed' attribut is changed, 'attributeChanged' is triggered, which in turn calls 'onAttributeChanged' with the data in the payload
90
91
  ```
91
92
 
93
+ Used in HTML as `<my-element observed></my-element>`. When the `observed` attribute
94
+ changes, `attributeChanged` is triggered, which calls `onAttributeChanged` with the
95
+ change data in the payload.
96
+
92
97
  Defines a custom HTML element with optional observed attributes and micro component integration.
93
98
  The class provided in DefinitionClass will be added to the ._mc hash object appended to the custom element instance.
94
99
  Automatically assigns a "PascalCase" class name derived from the <kebab-case> tagName.
@@ -168,7 +173,7 @@ Returns an array of all tag names registered via {@link defineCE}.
168
173
  ```ts
169
174
  defineCE('my-element', MyElement);
170
175
  defineCE('another-widget', AnotherWidget);
171
- console.log(listCE()); // ['my-element', 'another-widget']
176
+ console.log(listCE());
172
177
  ```
173
178
  @group Elements
174
179
  */
@@ -36,10 +36,10 @@ declare global {
36
36
 
37
37
  const el = document.querySelector('form');
38
38
  if (el && isMcHost(el)) {
39
- el._mc.trigger('Ping'); // controller API — nothing else claimed
39
+ el._mc.trigger('Ping');
40
40
  }
41
41
  if (el && isMcHost(el, 'cart')) {
42
- el._mc.cart.addItem(item); // Cart — presence checked by the guard
42
+ el._mc.cart.addItem(item);
43
43
  }
44
44
  ```
45
45
  */
@@ -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(``)}var s=new WeakMap;function c(e,t){let n=s.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),s.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function l(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`:c(document,t[i]);break;case`targetCss`:c(document,t[i]);break;case`shadowCss`:c(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],d(r,e);break;case`targetHtml`:n.innerHTML=t[i],d(n,e);break}})}function u(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 d(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 f(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function p(e,t,n={}){let r=e;`_mc`in e||(r._mc=new b(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 m(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 h(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function g(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 _(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 v(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 y=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof b&&this.constructor!==b){g(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&h(this)}}get target(){return this._target.deref()}},b=class e extends y{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),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,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`)?l(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?u(n._originalTag||r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),l(this,t),n._assets=Object.assign({},n._assets,t);for(let e of[`css`,`targetCss`])t[e]!==void 0&&delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),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 p(e,t,n)}static remove(e,t){m(e,t)}static get(e,t,n){if(!f(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=v(this.target,e);for(;n;)t.push(n),n=v(n.target,e);return t}closest(e){return v(this.target,e)}children(e){let t=_(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 x(e,t){return Object.defineProperty(t,"name",{value:e})}function S(e){return class extends e{constructor(...e){super(...e)}}}function C(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 y))return customElements.define(e,t),t;let s=x(a,class extends S(i){constructor(e){super(),b.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}),C.list||=[],C.list.push(e),s}function w(e){return customElements.get(e)}function T(){return C.list??[]}export{C as defineCE,w as getCE,T as listCE};
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(``)}var s=new WeakMap;function c(e,t){let n=s.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),s.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function l(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`:c(document,t[i]);break;case`targetCss`:c(document,t[i]);break;case`shadowCss`:c(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],d(r,e);break;case`targetHtml`:n.innerHTML=t[i],d(n,e);break}})}function u(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 d(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 f(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function p(e,t,n={}){let r=e;`_mc`in e||(r._mc=new b(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 m(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 h(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function g(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 _(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 v(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 y=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof b&&this.constructor!==b){g(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&h(this)}}get target(){return this._target.deref()}},b=class e extends y{static tag;static _assets={};static assets=[];static _assetsPromise;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),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,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=this,o=n.assets.filter(e=>!n._assets[e]);if(Object.keys(n._assets).length&&l(this,n._assets),o.length?(n._assetsPromise||=u(n._originalTag||r,o).then(e=>{let t={};o.forEach((n,r)=>{t[n]=e[r]}),n._assets=Object.assign({},n._assets,t);for(let e of[`css`,`targetCss`])t[e]!==void 0&&delete n._assets[e];return n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),t}),n._assetsPromise.then(e=>{l(this,e),a.trigger(`assets`,n._assets)})):[...Object.keys(n._assets)].length&&queueMicrotask(()=>a.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return p(e,t,n)}static remove(e,t){m(e,t)}static get(e,t,n){if(!f(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=v(this.target,e);for(;n;)t.push(n),n=v(n.target,e);return t}closest(e){return v(this.target,e)}children(e){let t=_(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 x(e,t){return Object.defineProperty(t,"name",{value:e})}function S(e){return class extends e{constructor(...e){super(...e)}}}function C(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 y))return customElements.define(e,t),t;let s=x(a,class extends S(i){constructor(e){super(),b.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}),C.list||=[],C.list.push(e),s}function w(e){return customElements.get(e)}function T(){return C.list??[]}export{C as defineCE,w as getCE,T as listCE};
@@ -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)}var f=new WeakMap;function p(e,t){let n=f.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),f.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function m(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`:p(document,t[i]);break;case`targetCss`:p(document,t[i]);break;case`shadowCss`:p(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],g(r,e);break;case`targetHtml`:n.innerHTML=t[i],g(n,e);break}})}function h(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 g(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 _(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function v(e,t,n={}){let r=e;`_mc`in e||(r._mc=new T(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 y(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 b(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function x(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 S(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 C(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 w=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof T&&this.constructor!==T){x(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&b(this)}}get target(){return this._target.deref()}},T=class e extends w{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),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,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`)?m(this,n._assets):n.assets.length&&!n.hasOwnProperty(`_assets`)&&(n._assets={}),a.length?h(n._originalTag||r,a).then(e=>{let t={};a.forEach((n,r)=>{t[n]=e[r]}),m(this,t),n._assets=Object.assign({},n._assets,t);for(let e of[`css`,`targetCss`])t[e]!==void 0&&delete n._assets[e];n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),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 v(e,t,n)}static remove(e,t){y(e,t)}static get(e,t,n){if(!_(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=C(this.target,e);for(;n;)t.push(n),n=C(n.target,e);return t}closest(e){return C(this.target,e)}children(e){let t=S(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 E(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 D=[`INPUT`,`SELECT`,`TEXTAREA`],O=class extends T{data={};oldDisplay=``;constructor(e){super(e),E(e).forEach(e=>this.data[e]=``),I(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&&!D.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 k(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!E(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function A(e){k(e).forEach(e=>{e?._mc?._placeholders||T.add(e,`_placeholders`,new O(e))})}function j(e){return typeof e==`object`&&!!e}var M={};function N(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=[],j(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(j(this.valueOf())){A(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=j(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 M[n]=r,r}function P(e){return M[e.constructor.name]||N(e)}function F(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function I(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`&&!F(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(P(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(j(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(j(a.valueOf())&&!(a.valueOf()instanceof Array))F(a)||(a=new(P(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(P(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 L(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];F(n)||I(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}})}L(T);var R=e=>e.tagName.toLowerCase(),z=class{constructor(e){}},B=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}},V=class extends z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},H=class extends z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},U=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})}},W=class extends z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},G=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(R(e)){case`input`:switch(e.type){case`radio`:r=new B(e);break;case`checkbox`:r=new V(e);break;default:r=new H(e)}break;case`select`:r=new U(e);break;case`textarea`:r=new W(e);break}if(r){let i=r;T.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 K(e,t,n){if(!o())return;let r=G(n),i=e;i[t]=Object.assign({},r),I(e,t);let a=i[t];d(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function q(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return K(this,t,e),this}})}export{q as formValuePlugin,K 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)}var f=new WeakMap;function p(e,t){let n=f.get(e)??new Set;if(n.has(t))return e.adoptedStyleSheets[0];n.add(t),f.set(e,n);let r=new CSSStyleSheet;return r.replaceSync(t),e.adoptedStyleSheets.push(r),r}function m(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`:p(document,t[i]);break;case`targetCss`:p(document,t[i]);break;case`shadowCss`:p(r,t[i]);break;case`shadowHtml`:r.innerHTML=t[i],g(r,e);break;case`targetHtml`:n.innerHTML=t[i],g(n,e);break}})}function h(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 g(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 _(e,t){return typeof HTMLElement<`u`&&e instanceof HTMLElement&&`_mc`in e&&(t===void 0||t in e._mc)}function v(e,t,n={}){let r=e;`_mc`in e||(r._mc=new T(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 y(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 b(e){queueMicrotask(()=>{e.trigger(`Init`,null)})}function x(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 S(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 C(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 w=class{_target;constructor(e){if(this._target=new WeakRef(e||{}),this instanceof T&&this.constructor!==T){x(this);let e=this.constructor.tag;(e===void 0||e.toUpperCase()===this.target.tagName)&&b(this)}}get target(){return this._target.deref()}},T=class e extends w{static tag;static _assets={};static assets=[];static _assetsPromise;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),n._originalTag=r,e.add(t,n.name,new n(t)),delete n._originalTag,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=this,o=n.assets.filter(e=>!n._assets[e]);if(Object.keys(n._assets).length&&m(this,n._assets),o.length?(n._assetsPromise||=h(n._originalTag||r,o).then(e=>{let t={};o.forEach((n,r)=>{t[n]=e[r]}),n._assets=Object.assign({},n._assets,t);for(let e of[`css`,`targetCss`])t[e]!==void 0&&delete n._assets[e];return n.assets=n.assets.filter(e=>e!==`css`&&e!==`targetCss`),t}),n._assetsPromise.then(e=>{m(this,e),a.trigger(`assets`,n._assets)})):[...Object.keys(n._assets)].length&&queueMicrotask(()=>a.trigger(`assets`,n._assets)),n.tag===``){this.target.remove();return}}getAssets(){return this.constructor._assets||{}}static add(e,t,n={}){return v(e,t,n)}static remove(e,t){y(e,t)}static get(e,t,n){if(!_(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=C(this.target,e);for(;n;)t.push(n),n=C(n.target,e);return t}closest(e){return C(this.target,e)}children(e){let t=S(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 E(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 D=[`INPUT`,`SELECT`,`TEXTAREA`],O=class extends T{data={};oldDisplay=``;constructor(e){super(e),E(e).forEach(e=>this.data[e]=``),I(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)),r=e.getAttribute(t)??``;this.data.subscribe((r=>i=>{let a=r;n.forEach(e=>{a=a.replace(e,String(i[e.replace(/[\{\}]/g,``)]))}),e.setAttribute(t,a)})(r))}),[...e.childNodes].filter(e=>e.nodeType===3&&(e.nodeValue||``).match(/\{[^\{\}]*\}/g)).forEach(n=>{t=!0;let r=n.nodeValue??``,i=new Set(r.match(/\{[^\{\}]*\}/g));this.data.subscribe((t=>r=>{let a=t;i.forEach(e=>{a=a.replace(e,String(r[e.replace(/[\{\}]/g,``)]))}),this.oldDisplay?e.style=this.oldDisplay:e.removeAttribute(`style`),delete this.oldDisplay,n.nodeValue=a})(r)),this.oldDisplay=e.getAttribute(`style`)||``,t&&!D.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 k(e){return[e,...e.querySelectorAll(`*`)].filter(e=>!!E(e).length).filter(e=>e?.tagName!==`STYLE`).reverse()}function A(e){k(e).forEach(e=>{e?._mc?._placeholders||T.add(e,`_placeholders`,new O(e))})}function j(e){return typeof e==`object`&&!!e}var M={};function N(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=[],j(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(j(this.valueOf())){A(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=j(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 M[n]=r,r}function P(e){return M[e.constructor.name]||N(e)}function F(e){return(typeof e==`object`||typeof e==`function`)&&e!==null&&`subscribe`in e}function I(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`&&!F(r)){if(t[0]===`_`||r===void 0)return;let i=r,a=new(P(i))(i),o=function(){queueMicrotask(function(){a.notify()})};Object.defineProperty(e,t,{enumerable:!0,get(){if(j(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(j(a.valueOf())&&!(a.valueOf()instanceof Array))F(a)||(a=new(P(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(P(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 L(e){let t=Object.getPrototypeOf(e.prototype);function n(e,t){let n=e[t];F(n)||I(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}})}L(T);var R=e=>e.tagName.toLowerCase(),z=class{constructor(e){}},B=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}},V=class extends z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.checked}set val(e){this.#e.checked=e}},H=class extends z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value}set val(e){this.#e.value=e}},U=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})}},W=class extends z{#e;constructor(e){super(e),this.#e=e}get val(){return this.#e.value||``}set val(e){this.#e.value=e}},G=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(R(e)){case`input`:switch(e.type){case`radio`:r=new B(e);break;case`checkbox`:r=new V(e);break;default:r=new H(e)}break;case`select`:r=new U(e);break;case`textarea`:r=new W(e);break}if(r){let i=r;T.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 K(e,t,n){if(!o())return;let r=G(n),i=e;i[t]=Object.assign({},r),I(e,t);let a=i[t];d(r,a),[...n.querySelectorAll(`input, textarea, select`)].forEach(e=>{e.addEventListener(`input`,()=>{a.notify()})})}function q(e){let t=Object.getPrototypeOf(e.prototype);Object.hasOwn(t,`formValues`)||Object.assign(t,{formValues:function(e,t){return K(this,t,e),this}})}export{q as formValuePlugin,K as formValues};