@twobirds/microcomponents 0.1.21 → 0.1.23

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 (71) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +91 -92
  3. package/dist/MC.min.js +1 -345
  4. package/dist/autoload.min.js +1 -0
  5. package/dist/core/MC.d.ts +401 -0
  6. package/dist/core/MC.d.ts.map +1 -0
  7. package/dist/core/MC.js +471 -0
  8. package/dist/core/autoload.d.ts +54 -0
  9. package/dist/core/autoload.d.ts.map +1 -0
  10. package/dist/core/autoload.js +158 -0
  11. package/dist/core/elements.d.ts +232 -0
  12. package/dist/core/elements.d.ts.map +1 -0
  13. package/dist/core/elements.js +123 -0
  14. package/dist/core/events.d.ts +231 -0
  15. package/dist/core/events.d.ts.map +1 -0
  16. package/dist/core/events.js +228 -0
  17. package/dist/core/mcGuards.d.ts +49 -0
  18. package/dist/core/mcGuards.d.ts.map +1 -0
  19. package/dist/core/mcGuards.js +19 -0
  20. package/dist/elements.min.js +1 -1
  21. package/dist/events.min.js +1 -0
  22. package/dist/formValues.min.js +1 -1
  23. package/dist/mcGuards.min.js +1 -0
  24. package/dist/microcomponents.d.ts +8 -5
  25. package/dist/microcomponents.d.ts.map +1 -1
  26. package/dist/microcomponents.js +8 -5
  27. package/dist/microcomponents.min.js +1 -1
  28. package/dist/observables.min.js +1 -1
  29. package/dist/state/formValues.d.ts +70 -0
  30. package/dist/state/formValues.d.ts.map +1 -0
  31. package/dist/state/formValues.js +334 -0
  32. package/dist/state/observables.d.ts +276 -0
  33. package/dist/state/observables.d.ts.map +1 -0
  34. package/dist/state/observables.js +382 -0
  35. package/dist/state/placeholders.d.ts +62 -0
  36. package/dist/state/placeholders.d.ts.map +1 -0
  37. package/dist/state/placeholders.js +181 -0
  38. package/dist/types/mcTypes.d.ts +201 -0
  39. package/dist/types/mcTypes.d.ts.map +1 -0
  40. package/dist/types/mcTypes.js +9 -0
  41. package/dist/utils/helpers.d.ts +195 -0
  42. package/dist/utils/helpers.d.ts.map +1 -0
  43. package/dist/utils/helpers.js +340 -0
  44. package/package.json +96 -62
  45. package/dist/MC.d.ts +0 -31
  46. package/dist/MC.d.ts.map +0 -1
  47. package/dist/MC.js +0 -249
  48. package/dist/MC.ts +0 -613
  49. package/dist/MicroComponents.svg +0 -15
  50. package/dist/elements.d.ts +0 -5
  51. package/dist/elements.d.ts.map +0 -1
  52. package/dist/elements.js +0 -49
  53. package/dist/elements.ts +0 -114
  54. package/dist/events.d.ts +0 -11
  55. package/dist/events.d.ts.map +0 -1
  56. package/dist/events.js +0 -55
  57. package/dist/events.ts +0 -158
  58. package/dist/formValues.d.ts +0 -3
  59. package/dist/formValues.d.ts.map +0 -1
  60. package/dist/formValues.js +0 -156
  61. package/dist/formValues.ts +0 -371
  62. package/dist/helpers.d.ts +0 -15
  63. package/dist/helpers.d.ts.map +0 -1
  64. package/dist/helpers.js +0 -113
  65. package/dist/helpers.ts +0 -219
  66. package/dist/main.mjs +0 -1
  67. package/dist/microcomponents.ts +0 -6
  68. package/dist/observables.d.ts +0 -11
  69. package/dist/observables.d.ts.map +0 -1
  70. package/dist/observables.js +0 -228
  71. package/dist/observables.ts +0 -449
package/dist/MC.js DELETED
@@ -1,249 +0,0 @@
1
- 'use strict';
2
- import { trigger, on, one, off } from './events.js';
3
- const isBrowser = new Function('try {return this===window;}catch(e){ return false;}');
4
- function isDOM(element) {
5
- return element && element instanceof HTMLElement;
6
- }
7
- function add(target, key, element = {}) {
8
- let node = target;
9
- if (!node._mc) {
10
- node._mc = new DC(target);
11
- }
12
- const _mc = node._mc;
13
- if (key.length && !_mc[key]) {
14
- _mc[key] = element;
15
- if (target instanceof HTMLElement && !target.getAttribute('data-mc')) {
16
- target.setAttribute('data-mc', '');
17
- }
18
- }
19
- return node;
20
- }
21
- function remove(target, key) {
22
- if (!key)
23
- return;
24
- const _mc = target?._mc || {};
25
- if (_mc && _mc[key]) {
26
- delete _mc[key];
27
- }
28
- if (!Object.keys(_mc).length && target instanceof HTMLElement && target.hasAttribute('data-mc')) {
29
- target.removeAttribute('data-mc');
30
- }
31
- return;
32
- }
33
- function init(element) {
34
- setTimeout(() => {
35
- if (element.constructor === DC)
36
- return;
37
- element.trigger('Init');
38
- }, 0);
39
- }
40
- function autoAttachListeners(element) {
41
- if (!isBrowser() || element.constructor === DC)
42
- return;
43
- const target = element.target;
44
- if (target instanceof HTMLElement) {
45
- let that = element;
46
- Object.getOwnPropertyNames(that.constructor.prototype)
47
- .filter((key) => /^(on[A-Z]|one[A-Z])/.test(key) && typeof that.constructor.prototype[key] === 'function')
48
- .forEach((key) => {
49
- let once = /^one/.test(key), withoutOnOne = key.replace(/^on[e]{0,1}/, ''), nativeEventName = withoutOnOne.toLowerCase();
50
- if ('on' + nativeEventName in target) {
51
- let listener = (ev) => {
52
- that[key](ev);
53
- };
54
- target.addEventListener(nativeEventName, listener);
55
- }
56
- else {
57
- let listener = (ev) => {
58
- that[key](ev);
59
- };
60
- on(target, withoutOnOne, listener, once);
61
- }
62
- });
63
- }
64
- }
65
- function getMcChildNodes(domNode) {
66
- const id = Math.random().toString().replace('.', '');
67
- const selector = '[data-mc]:not([temp_id="' + id + '"] [data-mc] [data-mc])';
68
- domNode.setAttribute('temp_id', id);
69
- const mcArray = [...domNode.querySelectorAll(selector)]
70
- .filter((e) => !!e._mc)
71
- .map((e) => e._mc);
72
- domNode.removeAttribute('temp_id');
73
- return mcArray.length ? mcArray : null;
74
- }
75
- class McBase {
76
- _target;
77
- constructor(target) {
78
- let element = this;
79
- this._target = new WeakRef(target || {});
80
- autoAttachListeners(element);
81
- init(element);
82
- }
83
- get target() {
84
- return this._target.deref();
85
- }
86
- }
87
- class MC extends McBase {
88
- constructor(target) {
89
- super(target);
90
- }
91
- }
92
- class DC extends McBase {
93
- constructor(target) {
94
- super(target);
95
- }
96
- static add(target, key, element = {}) {
97
- return add(target, key, element);
98
- }
99
- static remove(target, key) {
100
- remove(target, key);
101
- }
102
- off(eventName, handler) {
103
- off(this.target, eventName, handler);
104
- }
105
- on(eventName, handler) {
106
- return on(this.target, eventName, handler);
107
- }
108
- one(eventName, handler) {
109
- return one(this.target, eventName, handler);
110
- }
111
- trigger(eventName, data = {}, bubble = 'l', controller) {
112
- trigger(this.target, eventName, data, bubble, controller);
113
- }
114
- ancestors() {
115
- let currentNode = this?.target, result = [];
116
- if (!isDOM(currentNode))
117
- return [];
118
- while ((currentNode = currentNode.closest('[data-mc]'))) {
119
- if (currentNode?._mc) {
120
- result.push(currentNode?._mc);
121
- }
122
- }
123
- return result.length ? result : null;
124
- }
125
- closest() {
126
- let target = this.target;
127
- if (!isDOM(target))
128
- return null;
129
- return target.closest('[data-mc]')?._mc || null;
130
- }
131
- children() {
132
- let target = this?.target;
133
- if (!isDOM(target))
134
- return null;
135
- return getMcChildNodes(target);
136
- }
137
- descendants() {
138
- const target = this?.target;
139
- if (!isDOM(target))
140
- return [];
141
- const mcArray = [...target.querySelectorAll('[data-mc]')]
142
- .filter((e) => !!e._mc)
143
- .map((e) => e._mc);
144
- return mcArray.length ? mcArray : null;
145
- }
146
- }
147
- const loadingDCs = new Set();
148
- function attachDC(element) {
149
- return () => {
150
- const elements = Array.from(document.querySelectorAll(`[data-mc*="${element}"]`)).filter((element) => element instanceof HTMLElement);
151
- if (elements.length === 0)
152
- return;
153
- const Klass = customElements.get(element);
154
- elements.forEach((node) => {
155
- try {
156
- DC.add(node, Klass.name, new Klass(node));
157
- }
158
- catch (error) {
159
- if (Klass['create']) {
160
- let element = Klass.create(node);
161
- element.setAttribute('data-mc', node.getAttribute('data-mc'));
162
- node.replaceWith(element);
163
- node = element;
164
- }
165
- else {
166
- throw `Class ${Klass.name} doesn't have a callable constructor AND class doesn't have a static .create() method.`;
167
- }
168
- }
169
- const new_mc = node
170
- .getAttribute('data-mc')
171
- .split(' ')
172
- .filter((name) => name !== element && name !== '')
173
- .join(' ')
174
- .trim();
175
- node.setAttribute('data-mc', new_mc);
176
- });
177
- };
178
- }
179
- function makeLoadScript(element) {
180
- if (loadingDCs.has(element))
181
- return;
182
- loadingDCs.add(element);
183
- const fileName = './' + element.split('-').join('/') + '.js';
184
- const se = document.createElement('script');
185
- se.setAttribute('src', fileName);
186
- se.setAttribute('blocking', 'render');
187
- se.async = true;
188
- se.setAttribute('type', 'module');
189
- se.setAttribute('data-name', element);
190
- se.setAttribute('loading', '');
191
- const loadedPromise = customElements.whenDefined(element);
192
- loadedPromise.then(attachDC(element));
193
- se.addEventListener('load', (ev) => {
194
- loadingDCs.delete(element);
195
- document.head.querySelector(`script[data-name="${element}"]`)?.remove();
196
- });
197
- se.addEventListener('error', (ev) => {
198
- console.error('could not load DC code from', fileName);
199
- });
200
- document.head.append(se);
201
- }
202
- function loadUndefinedMCs() {
203
- [...document.querySelectorAll(':not(:defined)')]
204
- .filter((element) => !!element &&
205
- !customElements.get(element.tagName.toLowerCase()) &&
206
- !loadingDCs.has(element.tagName.toLowerCase()))
207
- .forEach((el) => {
208
- makeLoadScript(el.tagName.toLowerCase());
209
- });
210
- [...document.querySelectorAll('[data-mc]:not([data-mc=""]')]
211
- .filter((element) => !!element)
212
- .forEach((el) => {
213
- const _mc = el
214
- .getAttribute('data-mc')
215
- ?.split(' ')
216
- .filter((name) => name !== '');
217
- _mc?.forEach((element) => {
218
- const isDefined = customElements.get(element);
219
- if (!loadingDCs.has(element) && !isDefined) {
220
- makeLoadScript(element);
221
- }
222
- else if (isDefined) {
223
- attachDC(element)();
224
- }
225
- });
226
- });
227
- }
228
- let observer = null;
229
- function autoload(enable = true) {
230
- if (!enable) {
231
- if (observer) {
232
- observer.disconnect();
233
- observer = null;
234
- }
235
- return false;
236
- }
237
- const wasEnabled = !!observer;
238
- if (wasEnabled)
239
- return true;
240
- observer = new MutationObserver(loadUndefinedMCs);
241
- setTimeout(() => {
242
- observer.observe(document.body, { childList: true, subtree: true });
243
- loadUndefinedMCs();
244
- }, 5);
245
- window.autoload = window.autoload || autoload;
246
- return true;
247
- }
248
- autoload.state = loadingDCs;
249
- export { MC, DC, McBase, autoload };