@htmlplus/element 0.1.2 → 0.1.5

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 (66) hide show
  1. package/README.md +123 -25
  2. package/dist/client/decorators/bind.js +2 -1
  3. package/dist/client/decorators/element.js +113 -3
  4. package/dist/client/decorators/event.d.ts +19 -1
  5. package/dist/client/decorators/event.js +2 -2
  6. package/dist/client/decorators/index.js +0 -1
  7. package/dist/client/decorators/listen.d.ts +8 -1
  8. package/dist/client/decorators/method.js +2 -2
  9. package/dist/client/decorators/property.d.ts +11 -1
  10. package/dist/client/decorators/property.js +14 -5
  11. package/dist/client/decorators/state.js +8 -4
  12. package/dist/client/helpers/direction.d.ts +1 -1
  13. package/dist/client/helpers/slots.js +2 -1
  14. package/dist/client/services/link.js +3 -3
  15. package/dist/client/utils/api.d.ts +5 -1
  16. package/dist/client/utils/define-property.d.ts +1 -0
  17. package/dist/client/utils/define-property.js +1 -0
  18. package/dist/client/utils/host.js +1 -1
  19. package/dist/client/utils/index.d.ts +1 -1
  20. package/dist/client/utils/index.js +1 -1
  21. package/dist/compiler/compiler.js +3 -3
  22. package/dist/compiler/index.d.ts +1 -2
  23. package/dist/compiler/index.js +1 -2
  24. package/dist/compiler/plugins/attach.js +7 -10
  25. package/dist/compiler/plugins/docs.js +1 -0
  26. package/dist/compiler/plugins/extract.js +14 -2
  27. package/dist/compiler/plugins/index.d.ts +1 -0
  28. package/dist/compiler/plugins/index.js +1 -0
  29. package/dist/compiler/plugins/react.proxy/index.d.ts +1 -0
  30. package/dist/compiler/plugins/react.proxy/index.js +1 -0
  31. package/dist/compiler/plugins/react.proxy/react.proxy.d.ts +9 -0
  32. package/dist/compiler/plugins/react.proxy/react.proxy.js +60 -0
  33. package/dist/compiler/plugins/react.proxy/templates/README.md.hbs +1 -0
  34. package/dist/compiler/plugins/react.proxy/templates/_.gitignore.hbs +2 -0
  35. package/dist/compiler/plugins/react.proxy/templates/package.json.hbs +36 -0
  36. package/dist/compiler/plugins/react.proxy/templates/rollup.config.js.hbs +20 -0
  37. package/dist/compiler/plugins/react.proxy/templates/src/components/index.ts.hbs +3 -0
  38. package/dist/compiler/plugins/react.proxy/templates/src/components/{{fileName}}.ts.hbs +38 -0
  39. package/dist/compiler/plugins/react.proxy/templates/src/index.ts.hbs +1 -0
  40. package/dist/compiler/plugins/react.proxy/templates/src/proxy.ts.hbs +277 -0
  41. package/dist/compiler/plugins/react.proxy/templates/tsconfig.json.hbs +17 -0
  42. package/dist/compiler/utils/__dirname.d.ts +1 -0
  43. package/dist/compiler/utils/__dirname.js +5 -0
  44. package/dist/compiler/utils/index.d.ts +3 -0
  45. package/dist/compiler/utils/index.js +3 -0
  46. package/dist/compiler/utils/is-directory-empty.d.ts +1 -0
  47. package/dist/compiler/utils/is-directory-empty.js +19 -0
  48. package/dist/compiler/utils/render-template.d.ts +1 -0
  49. package/dist/compiler/utils/render-template.js +25 -0
  50. package/dist/types/context.d.ts +2 -0
  51. package/dist/types/index.d.ts +0 -5
  52. package/dist/types/index.js +0 -5
  53. package/dist/types/plugin.d.ts +4 -3
  54. package/package.json +10 -4
  55. package/dist/client/decorators/listen-options.d.ts +0 -2
  56. package/dist/client/decorators/listen-options.js +0 -2
  57. package/dist/types/api.d.ts +0 -5
  58. package/dist/types/api.js +0 -1
  59. package/dist/types/direction.d.ts +0 -1
  60. package/dist/types/direction.js +0 -1
  61. package/dist/types/event-options.d.ts +0 -18
  62. package/dist/types/event-options.js +0 -1
  63. package/dist/types/listen-options.d.ts +0 -7
  64. package/dist/types/listen-options.js +0 -1
  65. package/dist/types/property-options.d.ts +0 -10
  66. package/dist/types/property-options.js +0 -1
package/README.md CHANGED
@@ -109,7 +109,7 @@ For run any of the component, you must write element name tag into the `public/i
109
109
  <!-- public/index.html -->
110
110
 
111
111
  <body>
112
- <my-element></my-element>
112
+ <my-element></my-element>
113
113
  </body>
114
114
  ```
115
115
 
@@ -399,7 +399,11 @@ export class MyButton {
399
399
 
400
400
  ## Helpers
401
401
 
402
- TODO
402
+ What is helpers?
403
+
404
+ Helpers are a versatile tool in the web component building project that eliminates the need for rewriting.
405
+
406
+ You can import `Helpers` two ways:
403
407
 
404
408
  ```js
405
409
  import { direction } from '@htmlplus/element';
@@ -412,13 +416,14 @@ direction === Helpers.direction; // true
412
416
  <summary>classes</summary>
413
417
 
414
418
  TODO
419
+ `¯\_(ツ)_/¯`
415
420
 
416
421
  </details>
417
422
 
418
423
  <details>
419
424
  <summary>direction</summary>
420
425
 
421
- TODO
426
+ This helper returns `ltr` or `rtl` from component.
422
427
 
423
428
  ```js
424
429
  import { Element, direction } from '@htmlplus/element';
@@ -436,9 +441,14 @@ export class MyElement {
436
441
  <details>
437
442
  <summary>event</summary>
438
443
 
439
- TODO
444
+ `Event` is a wrapper of event listener, in JavaScript. `on` is like a `addEventListener` and `off` is like `removeEventListener` and used when you want to add or remove event on `window | documnet | Element`.
445
+
446
+ Options:
440
447
 
441
- Options: TODO
448
+ - target: `window | documnet | Element`
449
+ - event: `string`
450
+ - handler: `EventListenerOrEventListenerObject`
451
+ - options: `boolean | AddEventListenerOptions`
442
452
 
443
453
  ```js
444
454
  import { Bind, Element, on, off } from '@htmlplus/element';
@@ -466,7 +476,7 @@ export class MyElement {
466
476
  <details>
467
477
  <summary>host</summary>
468
478
 
469
- TODO
479
+ Returns output element of component.
470
480
 
471
481
  ```js
472
482
  import { Element, host } from '@htmlplus/element';
@@ -484,7 +494,7 @@ export class MyElement {
484
494
  <details>
485
495
  <summary>isRTL</summary>
486
496
 
487
- TODO
497
+ Returns a `boolean` to diagnosis direction style of element.
488
498
 
489
499
  ```js
490
500
  import { Element, isRTL } from '@htmlplus/element';
@@ -502,7 +512,7 @@ export class MyElement {
502
512
  <details>
503
513
  <summary>isServer</summary>
504
514
 
505
- TODO
515
+ Is a way to understand to component is mounted in DOM or not.
506
516
 
507
517
  ```js
508
518
  import { Element, isServer } from '@htmlplus/element';
@@ -520,7 +530,12 @@ export class MyElement {
520
530
  <details>
521
531
  <summary>query</summary>
522
532
 
523
- TODO
533
+ Is a wrapper of `querySelector` Is a way to find an element with a specific features.
534
+
535
+ Options:
536
+
537
+ - target: `HTML Element` or `Element Component(this)`
538
+ - selectors: `string` any specific features such as `id`, `class`, `element name`, ...
524
539
 
525
540
  ```js
526
541
  import { Element, query } from '@htmlplus/element';
@@ -551,7 +566,12 @@ export class MyElement {
551
566
  <details>
552
567
  <summary>queryAll</summary>
553
568
 
554
- TODO
569
+ Is a wrapper of `querySelectorAll` Is a way to find an array of elements with a specific features.
570
+
571
+ Options:
572
+
573
+ - target: `HTML Element` or `Element Component(this)`
574
+ - selectors: `string` any specific features such as `id`, `class`, `element name`, ...
555
575
 
556
576
  ```js
557
577
  import { Element, queryAll } from '@htmlplus/element';
@@ -580,6 +600,10 @@ export class MyElement {
580
600
  <details>
581
601
  <summary>slots</summary>
582
602
 
603
+ Sometimes components need to render dynamic children in specific locations in their component, so we use `slot` for separate these.
604
+
605
+ `slots` return the state of the slots of a component (is empty or not).
606
+
583
607
  ```js
584
608
  import { Element, Property, slots } from '@htmlplus/element';
585
609
 
@@ -615,7 +639,11 @@ export class MyElement {
615
639
  <details>
616
640
  <summary>styles</summary>
617
641
 
618
- TODO
642
+ Returns css style of your `array` or `object` style.
643
+
644
+ Options:
645
+
646
+ - input: `array | object`
619
647
 
620
648
  ```js
621
649
  import { Element, Property, styles } from '@htmlplus/element';
@@ -648,7 +676,12 @@ export class MyElement {
648
676
  <details>
649
677
  <summary>toUnit</summary>
650
678
 
651
- TODO
679
+ Transformer to `number` type or make unit based on unit input.
680
+
681
+ Options:
682
+
683
+ - input: `number | string`
684
+ - unit: `string`
652
685
 
653
686
  ```js
654
687
  import { Element, Property, toUnit } from '@htmlplus/element';
@@ -678,40 +711,105 @@ export class MyElement {
678
711
 
679
712
  ## Lifecycles
680
713
 
681
- TODO
714
+ Components have numerous lifecycle methods which can be used to know when the component.
682
715
 
683
716
  <details>
684
717
  <summary>connectedCallback</summary>
685
718
 
686
- TODO
719
+ Called every time the component is connected to the DOM. When the component is first connected, this method is called before `loadedCallback`.
720
+
721
+ ```js
722
+ import { Element } from '@htmlplus/element';
723
+
724
+ @Element()
725
+ export class MyElement {
726
+
727
+ connectedCallback() {
728
+ console.log("Component is connected!")
729
+ }
730
+
731
+ render() {
732
+ return (
733
+ <slot />
734
+ )
735
+ }
736
+ }
737
+ ```
687
738
 
688
739
  </details>
689
740
 
690
741
  <details>
691
742
  <summary>disconnectedCallback</summary>
692
743
 
693
- TODO
744
+ Called every time the component is disconnected from the DOM.
745
+
746
+ ```js
747
+ import { Element } from '@htmlplus/element';
748
+
749
+ @Element()
750
+ export class MyElement {
751
+
752
+ disconnectedCallback() {
753
+ console.log("Component is disconnected!")
754
+ }
755
+
756
+ render() {
757
+ return (
758
+ <slot />
759
+ )
760
+ }
761
+ }
762
+ ```
694
763
 
695
764
  </details>
696
765
 
697
766
  <details>
698
767
  <summary>loadedCallback</summary>
699
768
 
700
- TODO
769
+ Called once just after the component is fully loaded and the first `render()`.
701
770
 
702
- </details>
771
+ ```js
772
+ import { Element } from '@htmlplus/element';
703
773
 
704
- <details>
705
- <summary>updateCallback</summary>
774
+ @Element()
775
+ export class MyElement {
706
776
 
707
- TODO
777
+ loadedCallback() {
778
+ console.log("Component is loaded!")
779
+ }
780
+
781
+ render() {
782
+ return (
783
+ <slot />
784
+ )
785
+ }
786
+ }
787
+ ```
708
788
 
709
789
  </details>
710
790
 
711
791
  <details>
712
792
  <summary>updatedCallback</summary>
713
793
 
714
- TODO
794
+ Called everytime when `states` or `props` changed.It's never called during the first `render()`.
795
+
796
+ ```js
797
+ import { Element } from '@htmlplus/element';
798
+
799
+ @Element()
800
+ export class MyElement {
801
+
802
+ loadedCallback(prevProps, prevState, snapshot) {
803
+ console.log("Component is updated!")
804
+ }
805
+
806
+ render() {
807
+ return (
808
+ <slot />
809
+ )
810
+ }
811
+ }
812
+ ```
715
813
 
716
814
  </details>
717
815
 
@@ -740,7 +838,7 @@ All examples below produce output `<plus-button></plus-button>`
740
838
  <details>
741
839
  <summary>Explicitly tag name</summary>
742
840
 
743
- TODO
841
+ You can give the final name of your component as an input to the `@Element`.
744
842
 
745
843
  ```js
746
844
  import { Element } from '@htmlplus/element';
@@ -754,13 +852,13 @@ export class Button {}
754
852
  <details>
755
853
  <summary>Class name with at least 2 syllables</summary>
756
854
 
757
- TODO
855
+ The name of your element should eventually be `two` syllables.
758
856
 
759
857
  ```js
760
858
  import { Element } from '@htmlplus/element';
761
859
 
762
860
  @Element()
763
- export class PlusButton {}
861
+ export class PlusButton {} // <plus-button></plus-button>
764
862
  ```
765
863
 
766
864
  </details>
@@ -768,7 +866,7 @@ export class PlusButton {}
768
866
  <details>
769
867
  <summary>With global prefix (recommended)</summary>
770
868
 
771
- TODO
869
+ You can set a prefix for all elements and this prefix attached to all elements.
772
870
 
773
871
  ```js
774
872
  import { Element } from '@htmlplus/element';
@@ -1,10 +1,11 @@
1
+ import { defineProperty } from '../utils/index.js';
1
2
  export function Bind() {
2
3
  return function (target, propertyKey, descriptor) {
3
4
  return {
4
5
  configurable: true,
5
6
  get() {
6
7
  const value = descriptor === null || descriptor === void 0 ? void 0 : descriptor.value.bind(this);
7
- Object.defineProperty(this, propertyKey, {
8
+ defineProperty(this, propertyKey, {
8
9
  value,
9
10
  configurable: true,
10
11
  writable: true
@@ -1,9 +1,119 @@
1
- import { isServer, proxy } from '../utils/index.js';
1
+ var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
2
+ function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
3
+ return new (P || (P = Promise))(function (resolve, reject) {
4
+ function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
5
+ function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
6
+ function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
7
+ step((generator = generator.apply(thisArg, _arguments || [])).next());
8
+ });
9
+ };
10
+ import { html, render } from 'uhtml';
11
+ import * as CONSTANTS from '../../configs/constants.js';
12
+ import { isServer, parseValue } from '../utils/index.js';
2
13
  export function Element(tag) {
3
14
  return function (constructor) {
4
15
  if (isServer())
5
16
  return;
6
- // TODO: remove as any
7
- customElements.define(tag, proxy(constructor));
17
+ const members = constructor[CONSTANTS.TOKEN_STATIC_MEMBERS];
18
+ const styles = constructor[CONSTANTS.TOKEN_STATIC_STYLES];
19
+ customElements.define(tag, class extends HTMLElement {
20
+ constructor() {
21
+ var _a, _b;
22
+ var _c, _d;
23
+ super();
24
+ // TODO
25
+ this.plus = new constructor();
26
+ // TODO
27
+ let states, isPending, updatePromise;
28
+ const request = (state) => {
29
+ if (!true /*hasChange*/)
30
+ return Promise.resolve(false);
31
+ states = Object.assign(Object.assign({}, (states || {})), state);
32
+ if (!isPending)
33
+ updatePromise = enqueue();
34
+ return updatePromise;
35
+ };
36
+ const enqueue = () => __awaiter(this, void 0, void 0, function* () {
37
+ var _e;
38
+ isPending = true;
39
+ try {
40
+ yield updatePromise;
41
+ }
42
+ catch (error) {
43
+ Promise.reject(error);
44
+ }
45
+ // TODO: may be not used
46
+ if (!isPending)
47
+ return updatePromise;
48
+ try {
49
+ if (!true /*shouldUpdate*/)
50
+ return (isPending = false);
51
+ console.log('render');
52
+ // TODO
53
+ // call(CONSTANTS.TOKEN_LIFECYCLE_UPDATE, [allStates]);
54
+ render(this.shadowRoot, () => {
55
+ var _a;
56
+ const markup = (_a = this.plus[CONSTANTS.TOKEN_METHOD_RENDER]) === null || _a === void 0 ? void 0 : _a.call(this.plus);
57
+ if (!styles && !markup)
58
+ return html ``;
59
+ if (!styles)
60
+ return markup;
61
+ if (!markup)
62
+ return html `<style>${styles}</style>`;
63
+ return html `<style>${styles}</style>${markup}`;
64
+ });
65
+ // TODO
66
+ (_e = this.plus[CONSTANTS.TOKEN_LIFECYCLE_UPDATED]) === null || _e === void 0 ? void 0 : _e.call(this.plus, states);
67
+ states = undefined;
68
+ isPending = false;
69
+ return true;
70
+ }
71
+ catch (error) {
72
+ isPending = false;
73
+ throw error;
74
+ }
75
+ });
76
+ (_a = (_c = this.plus)[_d = CONSTANTS.TOKEN_API]) !== null && _a !== void 0 ? _a : (_c[_d] = {
77
+ [CONSTANTS.TOKEN_API_HOST]: () => this,
78
+ [CONSTANTS.TOKEN_API_REQUEST]: request
79
+ });
80
+ // TODO
81
+ (_b = this.plus.setup) === null || _b === void 0 ? void 0 : _b.forEach((setup) => setup.call(this.plus));
82
+ this.attachShadow({ mode: 'open' });
83
+ }
84
+ static get observedAttributes() {
85
+ return Object.keys(members).filter((key) => members[key][0] != CONSTANTS.TYPE_FUNCTION);
86
+ }
87
+ adoptedCallback() {
88
+ var _a;
89
+ (_a = this.plus[CONSTANTS.TOKEN_LIFECYCLE_ADOPTED]) === null || _a === void 0 ? void 0 : _a.call(this.plus);
90
+ }
91
+ attributeChangedCallback(name, prev, next) {
92
+ const [type] = members[name];
93
+ this.plus[name] = parseValue(next, type);
94
+ if (!this.plus[CONSTANTS.TOKEN_API][CONSTANTS.TOKEN_API_READY])
95
+ return;
96
+ this.plus[CONSTANTS.TOKEN_API][CONSTANTS.TOKEN_API_REQUEST]().catch((error) => {
97
+ throw error;
98
+ });
99
+ }
100
+ connectedCallback() {
101
+ var _a;
102
+ (_a = this.plus[CONSTANTS.TOKEN_LIFECYCLE_CONNECTED]) === null || _a === void 0 ? void 0 : _a.call(this.plus);
103
+ this.plus[CONSTANTS.TOKEN_API][CONSTANTS.TOKEN_API_REQUEST]()
104
+ .then(() => {
105
+ var _a;
106
+ (_a = this.plus[CONSTANTS.TOKEN_LIFECYCLE_LOADED]) === null || _a === void 0 ? void 0 : _a.call(this.plus);
107
+ })
108
+ .catch((error) => {
109
+ throw error;
110
+ });
111
+ this.plus[CONSTANTS.TOKEN_API][CONSTANTS.TOKEN_API_READY] = true;
112
+ }
113
+ disconnectedCallback() {
114
+ var _a;
115
+ (_a = this.plus[CONSTANTS.TOKEN_LIFECYCLE_DISCONNECTED]) === null || _a === void 0 ? void 0 : _a.call(this.plus);
116
+ }
117
+ });
8
118
  };
9
119
  }
@@ -1,3 +1,21 @@
1
- import { EventOptions, PlusElement } from '../../types/index.js';
1
+ import { PlusElement } from '../../types/index.js';
2
2
  export declare type EventEmitter<T = any> = (data?: T) => CustomEvent<T>;
3
+ export interface EventOptions {
4
+ /**
5
+ * A string custom event name to override the default.
6
+ */
7
+ name?: string;
8
+ /**
9
+ * A Boolean indicating whether the event bubbles up through the DOM or not. default is `false`.
10
+ */
11
+ bubbles?: boolean;
12
+ /**
13
+ * A Boolean indicating whether the event is cancelable. default is `false`.
14
+ */
15
+ cancelable?: boolean;
16
+ /**
17
+ * A Boolean value indicating whether or not the event can bubble across the boundary between the shadow DOM and the regular DOM. The default is false.
18
+ */
19
+ composed?: boolean;
20
+ }
3
21
  export declare function Event<T = any>(options?: EventOptions): (target: PlusElement, propertyKey: PropertyKey) => void;
@@ -1,8 +1,8 @@
1
- import { host } from '../utils/index.js';
1
+ import { defineProperty, host } from '../utils/index.js';
2
2
  // TODO: add global hook
3
3
  export function Event(options = {}) {
4
4
  return function (target, propertyKey) {
5
- Object.defineProperty(target, propertyKey, {
5
+ defineProperty(target, propertyKey, {
6
6
  get() {
7
7
  return (detail) => {
8
8
  var _a;
@@ -3,7 +3,6 @@ export * from './bind.js';
3
3
  export * from './element.js';
4
4
  export * from './event.js';
5
5
  export * from './listen.js';
6
- // export * from './listen-options.js';
7
6
  export * from './method.js';
8
7
  export * from './property.js';
9
8
  export * from './state.js';
@@ -1,4 +1,11 @@
1
- import { ListenOptions, PlusElement } from '../../types/index.js';
1
+ import { PlusElement } from '../../types/index.js';
2
+ export interface ListenOptions {
3
+ target?: 'host' | 'body' | 'document' | 'window';
4
+ once?: boolean;
5
+ passive?: boolean;
6
+ signal?: AbortSignal;
7
+ capture?: boolean;
8
+ }
2
9
  export declare function Listen(name: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
3
10
  configurable: boolean;
4
11
  get(): any;
@@ -1,8 +1,8 @@
1
- import { host, onReady } from '../utils/index.js';
1
+ import { defineProperty, host, onReady } from '../utils/index.js';
2
2
  export function Method() {
3
3
  return function (target, propertyKey) {
4
4
  onReady(target, function () {
5
- Object.defineProperty(host(this), propertyKey, {
5
+ defineProperty(host(this), propertyKey, {
6
6
  get: () => {
7
7
  return this[propertyKey].bind(this);
8
8
  }
@@ -1,2 +1,12 @@
1
- import { PlusElement, PropertyOptions } from '../../types/index.js';
1
+ import { PlusElement } from '../../types/index.js';
2
+ export interface PropertyOptions {
3
+ /**
4
+ * TODO
5
+ */
6
+ attribute?: boolean | string;
7
+ /**
8
+ * Whether property value is reflected back to the associated attribute. default is `false`.
9
+ */
10
+ reflect?: boolean;
11
+ }
2
12
  export declare function Property(options?: PropertyOptions): (target: PlusElement, propertyKey: PropertyKey) => void;
@@ -1,9 +1,9 @@
1
1
  import * as CONSTANTS from '../../configs/constants.js';
2
- import { api, host, onReady, parseValue, updateAttribute } from '../utils/index.js';
2
+ import { api, defineProperty, host, onReady, parseValue, updateAttribute } from '../utils/index.js';
3
3
  export function Property(options) {
4
4
  return function (target, propertyKey) {
5
5
  let prev, next;
6
- Object.defineProperty(target, propertyKey, {
6
+ defineProperty(target, propertyKey, {
7
7
  get() {
8
8
  return next;
9
9
  },
@@ -21,14 +21,23 @@ export function Property(options) {
21
21
  const parsed = parseValue(raw, type);
22
22
  if (parsed === next)
23
23
  return;
24
- if (options === null || options === void 0 ? void 0 : options.reflect)
24
+ api(this)
25
+ .request({ [propertyKey]: [next, prev] })
26
+ .then((renderd) => {
27
+ if (!renderd)
28
+ return;
29
+ if (!(options === null || options === void 0 ? void 0 : options.reflect))
30
+ return;
25
31
  updateAttribute(element, name, next);
26
- api(this).request({ [propertyKey]: [next, prev] });
32
+ })
33
+ .catch((error) => {
34
+ throw error;
35
+ });
27
36
  prev = next;
28
37
  }
29
38
  });
30
39
  onReady(target, function () {
31
- Object.defineProperty(host(this), propertyKey, {
40
+ defineProperty(host(this), propertyKey, {
32
41
  get: () => {
33
42
  return this[propertyKey];
34
43
  },
@@ -1,8 +1,8 @@
1
- import { api, host, onReady } from '../utils/index.js';
1
+ import { api, defineProperty, host, onReady } from '../utils/index.js';
2
2
  export function State() {
3
3
  return function (target, propertyKey) {
4
4
  let prev, next;
5
- Object.defineProperty(target, propertyKey, {
5
+ defineProperty(target, propertyKey, {
6
6
  get() {
7
7
  return next;
8
8
  },
@@ -13,12 +13,16 @@ export function State() {
13
13
  next = input;
14
14
  if (!((_a = api(this)) === null || _a === void 0 ? void 0 : _a.ready))
15
15
  return;
16
- api(this).request({ [propertyKey]: [next, prev] });
16
+ api(this)
17
+ .request({ [propertyKey]: [next, prev] })
18
+ .catch((error) => {
19
+ throw error;
20
+ });
17
21
  prev = next;
18
22
  }
19
23
  });
20
24
  onReady(target, function () {
21
- Object.defineProperty(host(this), propertyKey, {
25
+ defineProperty(host(this), propertyKey, {
22
26
  get: () => {
23
27
  return this[propertyKey];
24
28
  },
@@ -1,2 +1,2 @@
1
- import { Direction } from '../../types/index.js';
1
+ export declare type Direction = 'ltr' | 'rtl';
2
2
  export declare const direction: (target: any) => Direction;
@@ -1,10 +1,11 @@
1
+ import { defineProperty } from '../utils/index.js';
1
2
  import { queryAll } from './query-all.js';
2
3
  export const slots = (target) => {
3
4
  var _a;
4
5
  const result = {};
5
6
  (_a = queryAll(target, 'slot')) === null || _a === void 0 ? void 0 : _a.forEach((slot) => {
6
7
  const name = slot.name || 'default';
7
- Object.defineProperty(result, name, {
8
+ defineProperty(result, name, {
8
9
  get() {
9
10
  return !!slot.assignedNodes().filter((node) => { var _a; return node.nodeName != '#text' || ((_a = node.nodeValue) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
10
11
  }
@@ -1,4 +1,4 @@
1
- import { host } from '../utils/index.js';
1
+ import { defineProperty, host } from '../utils/index.js';
2
2
  const links = new Map();
3
3
  // TODO: return type
4
4
  export const createLink = (namespace) => {
@@ -51,7 +51,7 @@ export const createLink = (namespace) => {
51
51
  if (source.type === 'inject')
52
52
  return set(source, source.value /* TODO */);
53
53
  // TODO: any
54
- Object.defineProperty(source.instance, source.name, {
54
+ defineProperty(source.instance, source.name, {
55
55
  value: get(source) /* TODO */,
56
56
  enumerable: true,
57
57
  configurable: true
@@ -66,7 +66,7 @@ export const createLink = (namespace) => {
66
66
  const proxy = (source) => {
67
67
  let value = get(source);
68
68
  // TODO: any
69
- Object.defineProperty(source.instance, source.name, {
69
+ defineProperty(source.instance, source.name, {
70
70
  enumerable: true,
71
71
  configurable: true,
72
72
  get() {
@@ -1,2 +1,6 @@
1
- import { Api } from '../../types/index.js';
1
+ export interface Api {
2
+ ready: boolean;
3
+ host(): HTMLElement;
4
+ request(states?: any): Promise<boolean>;
5
+ }
2
6
  export declare const api: (target: any) => Api;
@@ -0,0 +1 @@
1
+ export declare const defineProperty: <T>(o: T, p: PropertyKey, attributes: PropertyDescriptor & ThisType<any>) => T;
@@ -0,0 +1 @@
1
+ export const defineProperty = Object.defineProperty;
@@ -1,2 +1,2 @@
1
- import { api } from '../utils/index.js';
1
+ import { api } from './api.js';
2
2
  export const host = (target) => api(target).host();
@@ -1,12 +1,12 @@
1
1
  export * from './api.js';
2
2
  export * from './append-to-method.js';
3
+ export * from './define-property.js';
3
4
  export * from './event.js';
4
5
  export * from './host.js';
5
6
  export * from './is-event.js';
6
7
  export * from './is-server.js';
7
8
  export * from './on-ready.js';
8
9
  export * from './parse-value.js';
9
- export * from './proxy.js';
10
10
  export * from './sync.js';
11
11
  export * from './to-boolean.js';
12
12
  export * from './to-event.js';
@@ -1,12 +1,12 @@
1
1
  export * from './api.js';
2
2
  export * from './append-to-method.js';
3
+ export * from './define-property.js';
3
4
  export * from './event.js';
4
5
  export * from './host.js';
5
6
  export * from './is-event.js';
6
7
  export * from './is-server.js';
7
8
  export * from './on-ready.js';
8
9
  export * from './parse-value.js';
9
- export * from './proxy.js';
10
10
  export * from './sync.js';
11
11
  export * from './to-boolean.js';
12
12
  export * from './to-event.js';