@htmlplus/element 0.4.9 → 0.5.1

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 (69) hide show
  1. package/README.md +19 -20
  2. package/client/decorators/attributes.js +2 -3
  3. package/client/decorators/element.js +18 -20
  4. package/client/decorators/listen.d.ts +13 -3
  5. package/client/decorators/listen.js +15 -5
  6. package/client/decorators/property.js +20 -20
  7. package/client/decorators/state.js +5 -9
  8. package/client/decorators/watch.d.ts +6 -4
  9. package/client/decorators/watch.js +18 -19
  10. package/client/helpers/query.js +3 -3
  11. package/client/helpers/queryAll.js +3 -3
  12. package/client/helpers/slots.js +10 -12
  13. package/client/utils/appendToMethod.d.ts +1 -1
  14. package/client/utils/appendToMethod.js +3 -3
  15. package/client/utils/call.d.ts +1 -1
  16. package/client/utils/call.js +2 -2
  17. package/client/utils/config.d.ts +9 -2
  18. package/client/utils/config.js +28 -4
  19. package/client/utils/getMembers.d.ts +8 -0
  20. package/client/utils/getMembers.js +5 -0
  21. package/client/utils/getTag.d.ts +2 -0
  22. package/client/utils/getTag.js +5 -0
  23. package/client/utils/index.d.ts +3 -2
  24. package/client/utils/index.js +3 -2
  25. package/client/utils/request.d.ts +8 -3
  26. package/client/utils/request.js +51 -25
  27. package/client/utils/shadowRoot.d.ts +2 -0
  28. package/client/utils/shadowRoot.js +5 -0
  29. package/client/utils/task.d.ts +4 -4
  30. package/client/utils/task.js +5 -8
  31. package/client/vendors/uhtml.js +1 -2
  32. package/compiler/compiler.js +21 -20
  33. package/compiler/plugins/assets.d.ts +2 -0
  34. package/compiler/plugins/assets.js +11 -4
  35. package/compiler/plugins/copy.d.ts +4 -4
  36. package/compiler/plugins/copy.js +8 -5
  37. package/compiler/plugins/customElement.d.ts +1 -0
  38. package/compiler/plugins/customElement.js +33 -13
  39. package/compiler/plugins/customElementReact/customElementReact.d.ts +10 -3
  40. package/compiler/plugins/customElementReact/customElementReact.js +10 -43
  41. package/compiler/plugins/customElementReact/templates/src/components/{{fileName}}.compact.ts.hbs +10 -7
  42. package/compiler/plugins/customElementReact/templates/src/components/{{fileName}}.ts.hbs +4 -5
  43. package/compiler/plugins/customElementReact/templates/src/proxy.ts.hbs +29 -38
  44. package/compiler/plugins/document.d.ts +3 -1
  45. package/compiler/plugins/document.js +11 -34
  46. package/compiler/plugins/extract.d.ts +1 -0
  47. package/compiler/plugins/extract.js +4 -6
  48. package/compiler/plugins/index.d.ts +1 -0
  49. package/compiler/plugins/index.js +1 -0
  50. package/compiler/plugins/parse.d.ts +4 -1
  51. package/compiler/plugins/parse.js +8 -7
  52. package/compiler/plugins/read.d.ts +7 -1
  53. package/compiler/plugins/read.js +6 -2
  54. package/compiler/plugins/readme.d.ts +9 -0
  55. package/compiler/plugins/readme.js +23 -0
  56. package/compiler/plugins/style.d.ts +3 -2
  57. package/compiler/plugins/style.js +11 -8
  58. package/compiler/plugins/visualStudioCode.d.ts +1 -0
  59. package/compiler/plugins/visualStudioCode.js +2 -2
  60. package/compiler/plugins/webTypes.d.ts +4 -2
  61. package/compiler/plugins/webTypes.js +17 -17
  62. package/constants/index.d.ts +19 -13
  63. package/constants/index.js +22 -15
  64. package/package.json +18 -13
  65. package/types/context.d.ts +13 -15
  66. package/client/utils/getMemberType.d.ts +0 -2
  67. package/client/utils/getMemberType.js +0 -5
  68. package/client/utils/getMembersKey.d.ts +0 -2
  69. package/client/utils/getMembersKey.js +0 -4
package/README.md CHANGED
@@ -1,16 +1,6 @@
1
1
  # Create Custom HTML Element
2
2
 
3
- [![Version](https://img.shields.io/npm/v/@htmlplus/element.svg)](https://www.npmjs.com/package/@htmlplus/element)
4
- [![GitHub forks](https://img.shields.io/github/forks/htmlplus/element)](https://github.com/htmlplus/element/network/members)
5
- [![GitHub stars](https://img.shields.io/github/stars/htmlplus/element)](https://github.com/htmlplus/element/stargazers)
6
- [![GitHub license](https://img.shields.io/github/license/htmlplus/element)](https://github.com/htmlplus/core/blob/main/LICENSE)
7
- [![Linkedin](https://img.shields.io/badge/Follow%20us-white?logo=linkedIn&color=0077B5&logoColor=white)](https://www.linkedin.com/company/htmlplus)
8
- [![code coverage](https://img.shields.io/coveralls//htmlplus/element/.svg?style=flat-square)](https://coveralls.io/r/htmlplus/element/)
9
- [![install size](https://packagephobia.now.sh/badge?p=element)](https://packagephobia.now.sh/result?p=element)
10
-
11
- Element is powerful library for building scalable, reusable design system for any technology.
12
- It is one of the fastest and most testable libraries for building web components on the web.
13
- Completely compatible for Typescript and tsx.
3
+ A powerful library for building scalable, reusable, fast, tastable and lightweight design system for any web technologies. Powerd by [Web Component](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements).
14
4
 
15
5
  ## Table of content
16
6
 
@@ -47,7 +37,7 @@ pnpm create @htmlplus/element
47
37
  cd htmlplus-project
48
38
  ```
49
39
 
50
- To start your Element project, run:
40
+ To start the project, run:
51
41
 
52
42
  ```bash
53
43
  # with npm
@@ -69,7 +59,7 @@ Element is based on classes, so all components are based on `decorator`.
69
59
  The decorator converts the next component code based on it's properties during the build.
70
60
 
71
61
  ```tsx
72
- // my-element/my-element.tsx
62
+ // my-element.tsx
73
63
 
74
64
  import { Element } from '@htmlplus/element';
75
65
 
@@ -92,7 +82,7 @@ The result of this component after build is provide `my-element` web component.
92
82
  The element automatically adds a same name style file to this component. Create `my-element.scss` file for style.
93
83
 
94
84
  ```scss
95
- // my-element/my-element.scss
85
+ // my-element.scss
96
86
 
97
87
  :host {
98
88
  display: block;
@@ -103,10 +93,10 @@ The element automatically adds a same name style file to this component. Create
103
93
 
104
94
  ## Development Environment
105
95
 
106
- For run any of the component, you must write element name tag into the `public/index.html`
96
+ For run any of the component, you must write element name tag into the `index.html`
107
97
 
108
98
  ```html
109
- <!-- public/index.html -->
99
+ <!-- index.html -->
110
100
 
111
101
  <body>
112
102
  <my-element></my-element>
@@ -289,16 +279,25 @@ export class MyButton {
289
279
  </details>
290
280
 
291
281
  <details>
292
- <summary>Watch</summary>
282
+ <summary>Watch</summary>
293
283
 
294
- `@Watch` take the name of the `@Property` and `@State` variable to monitor as a parameter. Any time the value of that property changes the function decorated by `@Watch` will be invoked with the `key`, `newValue` and `oldValue` as parameters. This is called first out of the lifecycle callbacks after a property changes.
284
+ Monitors `@Property` and `@State` to catch changes.
285
+ The decorated method will be invoked after any
286
+ changes with the `key`, `newValue`, and `oldValue` as parameters.
287
+ If the arguments aren't defined, all of the `@Property` and `@State` are considered.
295
288
 
296
- - **name**: `String` property name
289
+ Parameters:
290
+
291
+ - **keys**: Collection of `@Property` and `@State` names.
292
+ - **type**: string | string[]
293
+ - **default**: undefined
294
+ - **immediate**: Triggers the callback immediately after initialization.
295
+ - **type**: boolean
296
+ - **default**: undefined
297
297
 
298
298
  ```tsx
299
299
  import { Element, Property, Watch } from '@htmlplus/element';
300
300
 
301
-
302
301
  @Element()
303
302
  export class MyElement {
304
303
 
package/client/decorators/attributes.js CHANGED
@@ -2,12 +2,11 @@ import * as CONSTANTS from '../../constants/index.js';
2
2
  import { appendToMethod, host, syncAttributes } from '../utils/index.js';
3
3
  export function Attributes() {
4
4
  return function (target, propertyKey) {
5
- const symbol = Symbol();
6
5
  appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
7
- this[symbol] = syncAttributes(host(this));
6
+ this[CONSTANTS.API_ATTRIBUTES_SYNCER] = syncAttributes(host(this));
8
7
  });
9
8
  appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function () {
10
- this[symbol](this[propertyKey]);
9
+ this[CONSTANTS.API_ATTRIBUTES_SYNCER](this[propertyKey]);
11
10
  });
12
11
  };
13
12
  }
package/client/decorators/element.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { camelCase, paramCase } from 'change-case';
2
2
  import * as CONSTANTS from '../../constants/index.js';
3
- import { call, getMembersKey, getMemberType, isServer, parseValue, request } from '../utils/index.js';
3
+ import { call, getMembers, isServer, parseValue, request } from '../utils/index.js';
4
4
  export function Element(tag) {
5
5
  return function (constructor) {
6
6
  if (isServer())
@@ -11,39 +11,37 @@ export function Element(tag) {
11
11
  constructor() {
12
12
  super();
13
13
  this.attachShadow({ mode: 'open' });
14
- // TODO
15
14
  this[CONSTANTS.API_INSTANCE] = new constructor();
16
15
  this[CONSTANTS.API_INSTANCE][CONSTANTS.API_HOST] = () => this;
17
- this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'initialize';
18
16
  }
19
17
  // TODO: ignore functions
20
18
  static get observedAttributes() {
21
- return getMembersKey(constructor).map((key) => paramCase(key));
19
+ return Object.keys(getMembers(constructor)).map((key) => paramCase(key));
22
20
  }
23
21
  adoptedCallback() {
24
22
  call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_ADOPTED);
25
23
  }
26
- // TODO
27
- attributeChangedCallback(name, prev, next) {
28
- const key = camelCase(name);
29
- const type = getMemberType(this[CONSTANTS.API_INSTANCE], key);
30
- const parsed = parseValue(next, type);
31
- this[CONSTANTS.API_INSTANCE][key] = parsed;
24
+ attributeChangedCallback(attribute, prev, next) {
25
+ var _a;
26
+ const instance = this[CONSTANTS.API_INSTANCE];
27
+ if (instance[CONSTANTS.API_LOCKED])
28
+ return;
29
+ const name = camelCase(attribute);
30
+ const type = (_a = getMembers(instance)[name]) === null || _a === void 0 ? void 0 : _a.type;
31
+ const value = parseValue(next, type);
32
+ if (instance[name] === value)
33
+ return;
34
+ instance[name] = value;
32
35
  }
33
36
  connectedCallback() {
34
- this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'connected';
35
- call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_CONNECTED);
36
- request(this[CONSTANTS.API_INSTANCE])
37
- .then(() => {
38
- this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'loaded';
39
- call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_LOADED);
40
- })
41
- .catch((error) => {
42
- throw error;
37
+ const instance = this[CONSTANTS.API_INSTANCE];
38
+ instance[CONSTANTS.API_CONNECTED] = true;
39
+ call(instance, CONSTANTS.LIFECYCLE_CONNECTED);
40
+ request(instance, undefined, undefined, () => {
41
+ call(instance, CONSTANTS.LIFECYCLE_LOADED);
43
42
  });
44
43
  }
45
44
  disconnectedCallback() {
46
- this[CONSTANTS.API_INSTANCE][CONSTANTS.API_STATUS] = 'disconnected';
47
45
  call(this[CONSTANTS.API_INSTANCE], CONSTANTS.LIFECYCLE_DISCONNECTED);
48
46
  }
49
47
  }
package/client/decorators/listen.d.ts CHANGED
@@ -1,12 +1,22 @@
1
1
  import { PlusElement } from '../../types';
2
2
  export interface ListenOptions {
3
- target?: 'host' | 'body' | 'document' | 'window';
3
+ capture?: boolean;
4
4
  once?: boolean;
5
5
  passive?: boolean;
6
6
  signal?: AbortSignal;
7
- capture?: boolean;
7
+ target?: 'host' | 'body' | 'document' | 'window';
8
8
  }
9
- export declare function Listen(name: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
9
+ /**
10
+ * The default options.
11
+ */
12
+ export declare const ListenOptionsDefault: ListenOptions;
13
+ /**
14
+ * Will be called whenever the specified event is delivered to the target.
15
+ * [More](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
16
+ * @param type TODO
17
+ * @param options TODO
18
+ */
19
+ export declare function Listen(type: string, options?: ListenOptions): (target: PlusElement, propertyKey: PropertyKey, descriptor: PropertyDescriptor) => {
10
20
  configurable: boolean;
11
21
  get(): any;
12
22
  };
package/client/decorators/listen.js CHANGED
@@ -1,13 +1,23 @@
1
1
  import * as CONSTANTS from '../../constants/index.js';
2
2
  import { appendToMethod, host, on, off } from '../utils/index.js';
3
3
  import { Bind } from './bind.js';
4
- const defaults = {
4
+ /**
5
+ * The default options.
6
+ */
7
+ export const ListenOptionsDefault = {
5
8
  target: 'host'
6
9
  };
7
- export function Listen(name, options = defaults) {
10
+ /**
11
+ * Will be called whenever the specified event is delivered to the target.
12
+ * [More](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener).
13
+ * @param type TODO
14
+ * @param options TODO
15
+ */
16
+ export function Listen(type, options) {
8
17
  return function (target, propertyKey, descriptor) {
18
+ options = Object.assign({}, ListenOptionsDefault, options);
9
19
  const element = (instance) => {
10
- switch (options.target) {
20
+ switch (options === null || options === void 0 ? void 0 : options.target) {
11
21
  case 'body':
12
22
  return window.document.body;
13
23
  case 'document':
@@ -21,10 +31,10 @@ export function Listen(name, options = defaults) {
21
31
  }
22
32
  };
23
33
  appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
24
- on(element(this), name, this[propertyKey], options);
34
+ on(element(this), type, this[propertyKey], options);
25
35
  });
26
36
  appendToMethod(target, CONSTANTS.LIFECYCLE_DISCONNECTED, function () {
27
- off(element(this), name, this[propertyKey], options);
37
+ off(element(this), type, this[propertyKey], options);
28
38
  });
29
39
  return Bind()(target, propertyKey, descriptor);
30
40
  };
package/client/decorators/property.js CHANGED
@@ -1,38 +1,38 @@
1
- import { paramCase } from 'change-case';
2
1
  import * as CONSTANTS from '../../constants/index.js';
3
- import { defineProperty, getMemberType, host, parseValue, request, updateAttribute, appendToMethod } from '../utils/index.js';
2
+ import { defineProperty, host, request, appendToMethod, updateAttribute, getConfig, getMembers, getTag } from '../utils/index.js';
4
3
  export function Property(options) {
5
4
  return function (target, propertyKey) {
6
5
  const name = String(propertyKey);
7
- const attribute = paramCase(name);
8
6
  const symbol = Symbol();
9
- const type = getMemberType(target, name);
10
7
  function get() {
11
8
  return this[symbol];
12
9
  }
13
- function set(input) {
14
- const value = this[symbol];
15
- if (input === value)
10
+ function set(next) {
11
+ const previous = this[symbol];
12
+ if (next === previous)
16
13
  return;
17
- this[symbol] = input;
18
- const isReady = this[CONSTANTS.API_STATUS] == 'initialize';
19
- request(this, { [name]: [input, value] }).then(() => {
20
- const element = host(this);
21
- const has = element.hasAttribute(attribute);
22
- if (!isReady && has)
14
+ this[symbol] = next;
15
+ request(this, name, previous, (skip) => {
16
+ if (!(options === null || options === void 0 ? void 0 : options.reflect) || skip)
23
17
  return;
24
- if (!(options === null || options === void 0 ? void 0 : options.reflect))
25
- return;
26
- const raw = element.getAttribute(attribute);
27
- const parsed = parseValue(raw, type);
28
- if (input === parsed)
29
- return;
30
- updateAttribute(element, attribute, input);
18
+ target[CONSTANTS.API_LOCKED] = true;
19
+ updateAttribute(host(this), name, next);
20
+ target[CONSTANTS.API_LOCKED] = false;
31
21
  });
32
22
  }
33
23
  defineProperty(target, propertyKey, { get, set });
34
24
  appendToMethod(target, CONSTANTS.LIFECYCLE_CONNECTED, function () {
25
+ var _a;
35
26
  const element = host(this);
27
+ // TODO: experimental for global config
28
+ if (((_a = getMembers(this)[name]) === null || _a === void 0 ? void 0 : _a.default) === this[name]) {
29
+ const config = getConfig('component', getTag(target), 'property', name);
30
+ if (typeof config != 'undefined')
31
+ this[name] = config;
32
+ }
33
+ // TODO: experimental for isolated options
34
+ if (element === this)
35
+ return;
36
36
  const get = () => {
37
37
  return this[propertyKey];
38
38
  };
package/client/decorators/state.js CHANGED
@@ -6,16 +6,12 @@ export function State() {
6
6
  function get() {
7
7
  return this[symbol];
8
8
  }
9
- function set(input) {
10
- const value = this[symbol];
11
- if (input === value)
9
+ function set(next) {
10
+ const previous = this[symbol];
11
+ if (next === previous)
12
12
  return;
13
- this[symbol] = input;
14
- request(this, { [name]: [input, value] })
15
- .then(() => undefined)
16
- .catch((error) => {
17
- throw error;
18
- });
13
+ this[symbol] = next;
14
+ request(this, name, previous);
19
15
  }
20
16
  // TODO: configurable
21
17
  defineProperty(target, propertyKey, { get, set, configurable: true });
package/client/decorators/watch.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import { PlusElement } from '../../types';
2
2
  /**
3
- * Monitors properties and states to catch changes.
3
+ * Monitors `@Property` and `@State` to catch changes.
4
4
  * The decorated method will be invoked after any
5
- * changes with the key, newValue, and oldValue as parameters.
6
- * If the arguments aren't defined, all of the properties and states are considered.
5
+ * changes with the `key`, `newValue`, and `oldValue` as parameters.
6
+ * If the arguments aren't defined, all of the `@Property` and `@State` are considered.
7
+ * @param keys Collection of `@Property` and `@State` names.
8
+ * @param immediate Triggers the callback immediately after initialization.
7
9
  */
8
- export declare function Watch(keys?: Array<string>, immediate?: boolean): (target: PlusElement, propertyKey: PropertyKey) => void;
10
+ export declare function Watch(keys?: string | string[], immediate?: boolean): (target: PlusElement, propertyKey: PropertyKey) => void;
package/client/decorators/watch.js CHANGED
@@ -1,31 +1,30 @@
1
1
  import * as CONSTANTS from '../../constants/index.js';
2
2
  import { appendToMethod } from '../utils/index.js';
3
3
  /**
4
- * Monitors properties and states to catch changes.
4
+ * Monitors `@Property` and `@State` to catch changes.
5
5
  * The decorated method will be invoked after any
6
- * changes with the key, newValue, and oldValue as parameters.
7
- * If the arguments aren't defined, all of the properties and states are considered.
6
+ * changes with the `key`, `newValue`, and `oldValue` as parameters.
7
+ * If the arguments aren't defined, all of the `@Property` and `@State` are considered.
8
+ * @param keys Collection of `@Property` and `@State` names.
9
+ * @param immediate Triggers the callback immediately after initialization.
8
10
  */
9
11
  export function Watch(keys, immediate) {
10
12
  return function (target, propertyKey) {
13
+ // Gets all keys
14
+ const all = [keys].flat().filter((key) => key);
11
15
  // Registers a lifecycle to detect changes.
12
- appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function ([states]) {
13
- // Loops the keys
14
- for (const key of Object.keys(states)) {
15
- // TODO
16
- if ((keys === null || keys === void 0 ? void 0 : keys.length) && !keys.includes(key))
17
- continue;
18
- // Checks the existence of key
19
- if ((keys === null || keys === void 0 ? void 0 : keys.length) && !(key in states))
20
- continue;
21
- // Gets the current state
22
- const [next, prev] = states[key];
23
- // TODO
24
- if (!immediate && this[CONSTANTS.API_STATUS] != 'loaded')
25
- continue;
16
+ appendToMethod(target, CONSTANTS.LIFECYCLE_UPDATED, function (states) {
17
+ // Skips the logic if 'immediate' wasn't passed.
18
+ if (!immediate && !this[CONSTANTS.API_LOADED])
19
+ return;
20
+ // Loops the keys.
21
+ states.forEach((prev, key) => {
22
+ // Skips the current key.
23
+ if (all.length && !all.includes(key))
24
+ return;
26
25
  // Invokes the method with parameters.
27
- this[propertyKey](next, prev, key);
28
- }
26
+ this[propertyKey](this[key], prev, key);
27
+ });
29
28
  });
30
29
  };
31
30
  }
package/client/helpers/query.js CHANGED
@@ -1,5 +1,5 @@
1
- import { host } from '../utils/index.js';
1
+ import { shadowRoot } from '../utils/index.js';
2
2
  export function query(target, selectors) {
3
- var _a, _b;
4
- return (_b = (_a = host(target)) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector(selectors);
3
+ var _a;
4
+ return (_a = shadowRoot(target)) === null || _a === void 0 ? void 0 : _a.querySelector(selectors);
5
5
  }
package/client/helpers/queryAll.js CHANGED
@@ -1,5 +1,5 @@
1
- import { host } from '../utils/index.js';
1
+ import { shadowRoot } from '../utils/index.js';
2
2
  export function queryAll(target, selectors) {
3
- var _a, _b;
4
- return (_b = (_a = host(target)) === null || _a === void 0 ? void 0 : _a.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelectorAll(selectors);
3
+ var _a;
4
+ return (_a = shadowRoot(target)) === null || _a === void 0 ? void 0 : _a.querySelectorAll(selectors);
5
5
  }
package/client/helpers/slots.js CHANGED
@@ -1,15 +1,13 @@
1
- import { defineProperty } from '../utils/index.js';
2
- import { queryAll } from './queryAll.js';
1
+ import { host } from '../utils/index.js';
3
2
  export const slots = (target) => {
4
3
  var _a;
5
- const result = {};
6
- (_a = queryAll(target, 'slot')) === null || _a === void 0 ? void 0 : _a.forEach((slot) => {
7
- const name = slot.name || 'default';
8
- defineProperty(result, name, {
9
- get() {
10
- return !!slot.assignedNodes().filter((node) => { var _a; return node.nodeName != '#text' || ((_a = node.nodeValue) === null || _a === void 0 ? void 0 : _a.trim()); }).length;
11
- }
12
- });
13
- });
14
- return result;
4
+ const slots = {};
5
+ const children = Array.from(host(target).childNodes);
6
+ for (const child of children) {
7
+ const name = child['slot'] || (((_a = child.nodeValue) === null || _a === void 0 ? void 0 : _a.trim()) && 'default');
8
+ if (!name)
9
+ continue;
10
+ slots[name] = true;
11
+ }
12
+ return slots;
15
13
  };
package/client/utils/appendToMethod.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const appendToMethod: (target: any, propertyKey: PropertyKey, handler: (this: any, args: Array<any>) => void) => void;
1
+ export declare const appendToMethod: (target: any, propertyKey: PropertyKey, handler: (this: any, ...parameters: Array<any>) => void) => void;
package/client/utils/appendToMethod.js CHANGED
@@ -1,7 +1,7 @@
1
1
  export const appendToMethod = (target, propertyKey, handler) => {
2
2
  const callback = target[propertyKey];
3
- target[propertyKey] = function () {
4
- handler.bind(this)(Array.from(arguments));
5
- return callback === null || callback === void 0 ? void 0 : callback.bind(this)(arguments);
3
+ target[propertyKey] = function (...parameters) {
4
+ handler.bind(this)(...parameters);
5
+ return callback === null || callback === void 0 ? void 0 : callback.bind(this)(...parameters);
6
6
  };
7
7
  };
package/client/utils/call.d.ts CHANGED
@@ -1 +1 @@
1
- export declare const call: (target: any, key: string, ...args: Array<any>) => any;
1
+ export declare const call: (target: any, key: PropertyKey, ...parameters: Array<any>) => any;
package/client/utils/call.js CHANGED
@@ -1,4 +1,4 @@
1
- export const call = (target, key, ...args) => {
1
+ export const call = (target, key, ...parameters) => {
2
2
  var _a;
3
- return (_a = target[key]) === null || _a === void 0 ? void 0 : _a.call(target, ...args);
3
+ return (_a = target[key]) === null || _a === void 0 ? void 0 : _a.call(target, ...parameters);
4
4
  };
package/client/utils/config.d.ts CHANGED
@@ -1,5 +1,12 @@
1
1
  interface Options {
2
+ component?: {
3
+ [key: string]: {
4
+ property?: {
5
+ [key: string]: any;
6
+ };
7
+ };
8
+ };
2
9
  }
3
- export declare const getConfig: () => Options;
4
- export declare const setConfig: (config: Options) => void;
10
+ export declare const getConfig: (...parameters: string[]) => any;
11
+ export declare const setConfig: (config: Options, override?: boolean) => void;
5
12
  export {};
package/client/utils/config.js CHANGED
@@ -1,7 +1,31 @@
1
+ let defaults = {
2
+ component: {}
3
+ };
1
4
  let options = {};
2
- export const getConfig = () => {
3
- return options;
5
+ export const getConfig = (...parameters) => {
6
+ let config = options;
7
+ for (const parameter of parameters) {
8
+ if (!config)
9
+ break;
10
+ config = config[parameter];
11
+ }
12
+ return config;
13
+ };
14
+ export const setConfig = (config, override) => {
15
+ options = override ? merge({}, defaults, config) : merge({}, defaults, options, config);
4
16
  };
5
- export const setConfig = (config) => {
6
- options = config || {};
17
+ const merge = (target, ...sources) => {
18
+ for (const source of sources) {
19
+ if (!source)
20
+ continue;
21
+ for (const key of Object.keys(source)) {
22
+ if (source[key] instanceof Object) {
23
+ target[key] = merge(target[key] || {}, source[key]);
24
+ }
25
+ else {
26
+ target[key] = source[key];
27
+ }
28
+ }
29
+ }
30
+ return target;
7
31
  };
package/client/utils/getMembers.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ import * as CONSTANTS from '../../constants/index.js';
2
+ import { PlusElement } from '../../types';
3
+ export declare const getMembers: (target: PlusElement) => {
4
+ [member: string]: {
5
+ default?: any;
6
+ type?: any;
7
+ };
8
+ };
package/client/utils/getMembers.js ADDED
@@ -0,0 +1,5 @@
1
+ import * as CONSTANTS from '../../constants/index.js';
2
+ // TODO
3
+ export const getMembers = (target) => {
4
+ return target.constructor[CONSTANTS.STATIC_MEMBERS] || target[CONSTANTS.STATIC_MEMBERS] || {};
5
+ };
package/client/utils/getTag.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ import { PlusElement } from '../../types';
2
+ export declare const getTag: (target: PlusElement) => string | undefined;
package/client/utils/getTag.js ADDED
@@ -0,0 +1,5 @@
1
+ import * as CONSTANTS from '../../constants/index.js';
2
+ export const getTag = (target) => {
3
+ var _a;
4
+ return (_a = target.constructor[CONSTANTS.STATIC_TAG]) !== null && _a !== void 0 ? _a : target[CONSTANTS.STATIC_TAG];
5
+ };
package/client/utils/index.d.ts CHANGED
@@ -3,9 +3,9 @@ export * from './call.js';
3
3
  export * from './config.js';
4
4
  export * from './defineProperty.js';
5
5
  export * from './getFramework.js';
6
- export * from './getMembersKey.js';
7
- export * from './getMemberType.js';
6
+ export * from './getMembers.js';
8
7
  export * from './getStyles.js';
8
+ export * from './getTag.js';
9
9
  export * from './host.js';
10
10
  export * from './isEvent.js';
11
11
  export * from './isServer.js';
@@ -13,6 +13,7 @@ export * from './off.js';
13
13
  export * from './on.js';
14
14
  export * from './parseValue.js';
15
15
  export * from './request.js';
16
+ export * from './shadowRoot.js';
16
17
  export * from './syncAttributes.js';
17
18
  export * from './task.js';
18
19
  export * from './toBoolean.js';
package/client/utils/index.js CHANGED
@@ -3,9 +3,9 @@ export * from './call.js';
3
3
  export * from './config.js';
4
4
  export * from './defineProperty.js';
5
5
  export * from './getFramework.js';
6
- export * from './getMembersKey.js';
7
- export * from './getMemberType.js';
6
+ export * from './getMembers.js';
8
7
  export * from './getStyles.js';
8
+ export * from './getTag.js';
9
9
  export * from './host.js';
10
10
  export * from './isEvent.js';
11
11
  export * from './isServer.js';
@@ -13,6 +13,7 @@ export * from './off.js';
13
13
  export * from './on.js';
14
14
  export * from './parseValue.js';
15
15
  export * from './request.js';
16
+ export * from './shadowRoot.js';
16
17
  export * from './syncAttributes.js';
17
18
  export * from './task.js';
18
19
  export * from './toBoolean.js';
package/client/utils/request.d.ts CHANGED
@@ -1,4 +1,9 @@
1
1
  import { PlusElement } from '../../types';
2
- export declare const request: (target: PlusElement, state?: {
3
- [key: string]: [any, any];
4
- } | undefined) => Promise<boolean>;
2
+ /**
3
+ * Updates the DOM with a scheduled task.
4
+ * @param target The component instance.
5
+ * @param name Property/State name.
6
+ * @param previous The previous value of Property/State.
7
+ * @param callback Invoked when the rendering phase is completed.
8
+ */
9
+ export declare const request: (target: PlusElement, name?: string, previous?: any, callback?: Function) => void;