@twobirds/microcomponents 0.1.1 → 0.1.2

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 (324) hide show
  1. package/dist/MC.min.js +33 -52
  2. package/dist/elements.min.js +1 -1
  3. package/dist/formValues.min.js +1 -1
  4. package/dist/microcomponents.min.js +1 -1
  5. package/dist/observables.min.js +1 -1
  6. package/package.json +11 -2
  7. package/.gitlab-ci.yml +0 -18
  8. package/.vscode/settings.json +0 -3
  9. package/MicroComponents.svg +0 -15
  10. package/assets/documentation/MC.md +0 -547
  11. package/assets/documentation/MicroComponents.svg +0 -15
  12. package/assets/documentation/ajaxian-1.png +0 -0
  13. package/assets/documentation/ajaxian-2.png +0 -0
  14. package/assets/documentation/ajaxian-3.png +0 -0
  15. package/assets/documentation/elements.md +0 -277
  16. package/assets/documentation/formvalues.md +0 -25
  17. package/assets/documentation/functional_requirements.md +0 -8
  18. package/assets/documentation/history.md +0 -436
  19. package/assets/documentation/klemmstein.png +0 -0
  20. package/assets/documentation/magic.md +0 -29
  21. package/assets/documentation/observables.md +0 -187
  22. package/assets/documentation/rnd0023-1.jpg +0 -0
  23. package/assets/documentation/rnd0023-2.jpg +0 -0
  24. package/assets/documentation/rnd0023-3.jpg +0 -0
  25. package/assets/documentation/tB_react.md +0 -207
  26. package/assets/documentation/usage.md +0 -142
  27. package/assets/documentation/why.md +0 -25
  28. package/assets/fiddle/MicroComponents.svg +0 -15
  29. package/assets/fiddle/fiddle.css +0 -0
  30. package/assets/fiddle/fiddle.js +0 -0
  31. package/assets/fiddle/index.html +0 -0
  32. package/assets/test/MicroComponents.svg +0 -15
  33. package/assets/test/grandparent.css +0 -16
  34. package/assets/test/myButton.css +0 -19
  35. package/assets/test/style.css +0 -8
  36. package/assets/test/test.html +0 -29
  37. package/assets/test/testform.json +0 -27
  38. package/public/.nojekyll +0 -1
  39. package/public/MC.d.ts +0 -39
  40. package/public/MC.d.ts.map +0 -1
  41. package/public/MC.js +0 -287
  42. package/public/MC.js.map +0 -1
  43. package/public/MC.min.js +0 -348
  44. package/public/MC.ts +0 -431
  45. package/public/MicroComponents.svg +0 -15
  46. package/public/documentation/MC.md +0 -547
  47. package/public/documentation/MicroComponents.svg +0 -15
  48. package/public/documentation/ajaxian-1.png +0 -0
  49. package/public/documentation/ajaxian-2.png +0 -0
  50. package/public/documentation/ajaxian-3.png +0 -0
  51. package/public/documentation/elements.md +0 -277
  52. package/public/documentation/formvalues.md +0 -25
  53. package/public/documentation/functional_requirements.md +0 -8
  54. package/public/documentation/history.md +0 -436
  55. package/public/documentation/klemmstein.png +0 -0
  56. package/public/documentation/magic.md +0 -29
  57. package/public/documentation/observables.md +0 -187
  58. package/public/documentation/rnd0023-1.jpg +0 -0
  59. package/public/documentation/rnd0023-2.jpg +0 -0
  60. package/public/documentation/rnd0023-3.jpg +0 -0
  61. package/public/documentation/tB_react.md +0 -207
  62. package/public/documentation/usage.md +0 -142
  63. package/public/documentation/why.md +0 -25
  64. package/public/elements.d.ts +0 -5
  65. package/public/elements.d.ts.map +0 -1
  66. package/public/elements.js +0 -68
  67. package/public/elements.js.map +0 -1
  68. package/public/elements.min.js +0 -1
  69. package/public/elements.ts +0 -119
  70. package/public/fiddle/MicroComponents.svg +0 -15
  71. package/public/fiddle/fiddle.css +0 -0
  72. package/public/fiddle/fiddle.js +0 -0
  73. package/public/fiddle/index.html +0 -0
  74. package/public/formValues.d.ts +0 -3
  75. package/public/formValues.d.ts.map +0 -1
  76. package/public/formValues.js +0 -162
  77. package/public/formValues.js.map +0 -1
  78. package/public/formValues.min.js +0 -1
  79. package/public/formValues.ts +0 -225
  80. package/public/helpers.d.ts +0 -14
  81. package/public/helpers.d.ts.map +0 -1
  82. package/public/helpers.js +0 -113
  83. package/public/helpers.js.map +0 -1
  84. package/public/helpers.ts +0 -149
  85. package/public/microcomponents.d.ts +0 -6
  86. package/public/microcomponents.d.ts.map +0 -1
  87. package/public/microcomponents.js +0 -7
  88. package/public/microcomponents.js.map +0 -1
  89. package/public/microcomponents.min.js +0 -1
  90. package/public/microcomponents.ts +0 -8
  91. package/public/observables.d.ts +0 -11
  92. package/public/observables.d.ts.map +0 -1
  93. package/public/observables.js +0 -244
  94. package/public/observables.js.map +0 -1
  95. package/public/observables.min.js +0 -1
  96. package/public/observables.ts +0 -416
  97. package/public/selectors._ts +0 -1269
  98. package/public/src/MC.d.ts +0 -39
  99. package/public/src/MC.d.ts.map +0 -1
  100. package/public/src/MC.js +0 -287
  101. package/public/src/MC.js.map +0 -1
  102. package/public/src/MC.ts +0 -431
  103. package/public/src/elements.d.ts +0 -5
  104. package/public/src/elements.d.ts.map +0 -1
  105. package/public/src/elements.js +0 -68
  106. package/public/src/elements.js.map +0 -1
  107. package/public/src/elements.ts +0 -119
  108. package/public/src/formValues.d.ts +0 -3
  109. package/public/src/formValues.d.ts.map +0 -1
  110. package/public/src/formValues.js +0 -162
  111. package/public/src/formValues.js.map +0 -1
  112. package/public/src/formValues.ts +0 -225
  113. package/public/src/helpers.d.ts +0 -14
  114. package/public/src/helpers.d.ts.map +0 -1
  115. package/public/src/helpers.js +0 -113
  116. package/public/src/helpers.js.map +0 -1
  117. package/public/src/helpers.ts +0 -149
  118. package/public/src/microcomponents.d.ts +0 -6
  119. package/public/src/microcomponents.d.ts.map +0 -1
  120. package/public/src/microcomponents.js +0 -7
  121. package/public/src/microcomponents.js.map +0 -1
  122. package/public/src/microcomponents.ts +0 -8
  123. package/public/src/observables.d.ts +0 -11
  124. package/public/src/observables.d.ts.map +0 -1
  125. package/public/src/observables.js +0 -244
  126. package/public/src/observables.js.map +0 -1
  127. package/public/src/observables.ts +0 -416
  128. package/public/src/selectors._ts +0 -1269
  129. package/public/src/test/grandparent.css +0 -14
  130. package/public/src/test/test/child.d.ts +0 -2
  131. package/public/src/test/test/child.d.ts.map +0 -1
  132. package/public/src/test/test/child.js +0 -26
  133. package/public/src/test/test/child.js.map +0 -1
  134. package/public/src/test/test/child.ts +0 -36
  135. package/public/src/test/test/grandchild.d.ts +0 -2
  136. package/public/src/test/test/grandchild.d.ts.map +0 -1
  137. package/public/src/test/test/grandchild.js +0 -22
  138. package/public/src/test/test/grandchild.js.map +0 -1
  139. package/public/src/test/test/grandchild.ts +0 -31
  140. package/public/src/test/test/grandparent.d.ts +0 -2
  141. package/public/src/test/test/grandparent.d.ts.map +0 -1
  142. package/public/src/test/test/grandparent.js +0 -1
  143. package/public/src/test/test/grandparent.js.map +0 -1
  144. package/public/src/test/test/grandparent.ts +0 -43
  145. package/public/src/test/test/greatgrandchild.d.ts +0 -2
  146. package/public/src/test/test/greatgrandchild.d.ts.map +0 -1
  147. package/public/src/test/test/greatgrandchild.js +0 -36
  148. package/public/src/test/test/greatgrandchild.js.map +0 -1
  149. package/public/src/test/test/greatgrandchild.ts +0 -51
  150. package/public/src/test/test/parent.d.ts +0 -2
  151. package/public/src/test/test/parent.d.ts.map +0 -1
  152. package/public/src/test/test/parent.js +0 -25
  153. package/public/src/test/test/parent.js.map +0 -1
  154. package/public/src/test/test/parent.ts +0 -35
  155. package/public/src/test/test/testform.d.ts +0 -2
  156. package/public/src/test/test/testform.d.ts.map +0 -1
  157. package/public/src/test/test/testform.js +0 -1
  158. package/public/src/test/test/testform.js.map +0 -1
  159. package/public/src/test/test/testform.ts +0 -153
  160. package/public/src/test/test/testfunction.d.ts +0 -3
  161. package/public/src/test/test/testfunction.d.ts.map +0 -1
  162. package/public/src/test/test/testfunction.js +0 -7
  163. package/public/src/test/test/testfunction.js.map +0 -1
  164. package/public/src/test/test/testfunction.ts +0 -12
  165. package/public/src/test/test/testmc.d.ts +0 -3
  166. package/public/src/test/test/testmc.d.ts.map +0 -1
  167. package/public/src/test/test/testmc.js +0 -10
  168. package/public/src/test/test/testmc.js.map +0 -1
  169. package/public/src/test/test/testmc.ts +0 -16
  170. package/public/src/test/test/testsimpleclass.d.ts +0 -3
  171. package/public/src/test/test/testsimpleclass.d.ts.map +0 -1
  172. package/public/src/test/test/testsimpleclass.js +0 -9
  173. package/public/src/test/test/testsimpleclass.js.map +0 -1
  174. package/public/src/test/test/testsimpleclass.ts +0 -15
  175. package/public/src/test/test.d.ts +0 -2
  176. package/public/src/test/test.d.ts.map +0 -1
  177. package/public/src/test/test.js +0 -72
  178. package/public/src/test/test.js.map +0 -1
  179. package/public/src/test/test.ts +0 -176
  180. package/public/src/test/testform.css +0 -47
  181. package/public/src/test/testform.html +0 -56
  182. package/public/src/test/testform.json +0 -27
  183. package/public/test/MC.d.ts +0 -39
  184. package/public/test/MC.d.ts.map +0 -1
  185. package/public/test/MC.js +0 -287
  186. package/public/test/MC.min.js +0 -348
  187. package/public/test/MC.ts +0 -431
  188. package/public/test/MicroComponents.svg +0 -15
  189. package/public/test/elements.d.ts +0 -5
  190. package/public/test/elements.d.ts.map +0 -1
  191. package/public/test/elements.js +0 -68
  192. package/public/test/elements.min.js +0 -1
  193. package/public/test/elements.ts +0 -119
  194. package/public/test/formValues.d.ts +0 -3
  195. package/public/test/formValues.d.ts.map +0 -1
  196. package/public/test/formValues.js +0 -162
  197. package/public/test/formValues.min.js +0 -1
  198. package/public/test/formValues.ts +0 -225
  199. package/public/test/grandparent.css +0 -14
  200. package/public/test/helpers.d.ts +0 -14
  201. package/public/test/helpers.d.ts.map +0 -1
  202. package/public/test/helpers.js +0 -113
  203. package/public/test/helpers.ts +0 -149
  204. package/public/test/microcomponents.d.ts +0 -6
  205. package/public/test/microcomponents.d.ts.map +0 -1
  206. package/public/test/microcomponents.js +0 -7
  207. package/public/test/microcomponents.min.js +0 -1
  208. package/public/test/microcomponents.ts +0 -8
  209. package/public/test/myButton.css +0 -19
  210. package/public/test/observables.d.ts +0 -11
  211. package/public/test/observables.d.ts.map +0 -1
  212. package/public/test/observables.js +0 -244
  213. package/public/test/observables.min.js +0 -1
  214. package/public/test/observables.ts +0 -416
  215. package/public/test/style.css +0 -8
  216. package/public/test/test/child.d.ts +0 -2
  217. package/public/test/test/child.d.ts.map +0 -1
  218. package/public/test/test/child.js +0 -26
  219. package/public/test/test/child.js.map +0 -1
  220. package/public/test/test/child.ts +0 -36
  221. package/public/test/test/grandchild.d.ts +0 -2
  222. package/public/test/test/grandchild.d.ts.map +0 -1
  223. package/public/test/test/grandchild.js +0 -22
  224. package/public/test/test/grandchild.js.map +0 -1
  225. package/public/test/test/grandchild.ts +0 -31
  226. package/public/test/test/grandparent.d.ts +0 -2
  227. package/public/test/test/grandparent.d.ts.map +0 -1
  228. package/public/test/test/grandparent.js +0 -1
  229. package/public/test/test/grandparent.js.map +0 -1
  230. package/public/test/test/grandparent.ts +0 -43
  231. package/public/test/test/greatgrandchild.d.ts +0 -2
  232. package/public/test/test/greatgrandchild.d.ts.map +0 -1
  233. package/public/test/test/greatgrandchild.js +0 -36
  234. package/public/test/test/greatgrandchild.js.map +0 -1
  235. package/public/test/test/greatgrandchild.ts +0 -51
  236. package/public/test/test/parent.d.ts +0 -2
  237. package/public/test/test/parent.d.ts.map +0 -1
  238. package/public/test/test/parent.js +0 -25
  239. package/public/test/test/parent.js.map +0 -1
  240. package/public/test/test/parent.ts +0 -35
  241. package/public/test/test/testform.d.ts +0 -2
  242. package/public/test/test/testform.d.ts.map +0 -1
  243. package/public/test/test/testform.js +0 -1
  244. package/public/test/test/testform.js.map +0 -1
  245. package/public/test/test/testform.ts +0 -153
  246. package/public/test/test/testfunction.d.ts +0 -3
  247. package/public/test/test/testfunction.d.ts.map +0 -1
  248. package/public/test/test/testfunction.js +0 -7
  249. package/public/test/test/testfunction.js.map +0 -1
  250. package/public/test/test/testfunction.ts +0 -12
  251. package/public/test/test/testmc.d.ts +0 -3
  252. package/public/test/test/testmc.d.ts.map +0 -1
  253. package/public/test/test/testmc.js +0 -10
  254. package/public/test/test/testmc.js.map +0 -1
  255. package/public/test/test/testmc.ts +0 -16
  256. package/public/test/test/testsimpleclass.d.ts +0 -3
  257. package/public/test/test/testsimpleclass.d.ts.map +0 -1
  258. package/public/test/test/testsimpleclass.js +0 -9
  259. package/public/test/test/testsimpleclass.js.map +0 -1
  260. package/public/test/test/testsimpleclass.ts +0 -15
  261. package/public/test/test.d.ts +0 -2
  262. package/public/test/test.d.ts.map +0 -1
  263. package/public/test/test.html +0 -29
  264. package/public/test/test.js +0 -72
  265. package/public/test/test.js.map +0 -1
  266. package/public/test/test.ts +0 -176
  267. package/public/test/testform.css +0 -47
  268. package/public/test/testform.html +0 -56
  269. package/public/test/testform.json +0 -27
  270. package/public/typedoc/.nojekyll +0 -1
  271. package/public/typedoc/assets/highlight.css +0 -106
  272. package/public/typedoc/assets/icons.js +0 -18
  273. package/public/typedoc/assets/icons.svg +0 -1
  274. package/public/typedoc/assets/main.js +0 -60
  275. package/public/typedoc/assets/navigation.js +0 -1
  276. package/public/typedoc/assets/search.js +0 -1
  277. package/public/typedoc/assets/style.css +0 -1493
  278. package/public/typedoc/classes/MC.DC.html +0 -13
  279. package/public/typedoc/classes/MC.MC.html +0 -3
  280. package/public/typedoc/classes/MC.McBase.html +0 -3
  281. package/public/typedoc/functions/MC.autoload.html +0 -1
  282. package/public/typedoc/functions/MC.off.html +0 -1
  283. package/public/typedoc/functions/MC.on.html +0 -1
  284. package/public/typedoc/functions/MC.one.html +0 -1
  285. package/public/typedoc/functions/MC.trigger.html +0 -1
  286. package/public/typedoc/functions/elements.defineCE.html +0 -1
  287. package/public/typedoc/functions/elements.getCE.html +0 -1
  288. package/public/typedoc/functions/formValues.formValues.html +0 -1
  289. package/public/typedoc/functions/observables.observe.html +0 -1
  290. package/public/typedoc/hierarchy.html +0 -1
  291. package/public/typedoc/index.html +0 -122
  292. package/public/typedoc/interfaces/MC.HTMLMcElement.html +0 -758
  293. package/public/typedoc/media/MicroComponents.svg +0 -15
  294. package/public/typedoc/modules/MC.html +0 -10
  295. package/public/typedoc/modules/elements.html +0 -3
  296. package/public/typedoc/modules/formValues.html +0 -2
  297. package/public/typedoc/modules/observables.html +0 -3
  298. package/public/typedoc/modules.html +0 -5
  299. package/public/typedoc/types/observables.Observable.html +0 -1
  300. package/src/MC.ts +0 -431
  301. package/src/elements.ts +0 -119
  302. package/src/formValues.ts +0 -225
  303. package/src/helpers.ts +0 -149
  304. package/src/microcomponents.ts +0 -8
  305. package/src/observables.ts +0 -416
  306. package/src/selectors._ts +0 -1269
  307. package/src/test/grandparent.css +0 -14
  308. package/src/test/test/child.ts +0 -36
  309. package/src/test/test/grandchild.ts +0 -31
  310. package/src/test/test/grandparent.ts +0 -43
  311. package/src/test/test/greatgrandchild.ts +0 -51
  312. package/src/test/test/parent.ts +0 -35
  313. package/src/test/test/testform.ts +0 -153
  314. package/src/test/test/testfunction.ts +0 -12
  315. package/src/test/test/testmc.ts +0 -16
  316. package/src/test/test/testsimpleclass.ts +0 -15
  317. package/src/test/test.ts +0 -176
  318. package/src/test/testform.css +0 -47
  319. package/src/test/testform.html +0 -56
  320. package/src/test/testform.json +0 -27
  321. package/tasks.md +0 -36
  322. package/tsconfig.json +0 -107
  323. package/typedoc.json +0 -7
  324. package/webpack.config.js +0 -346
package/public/src/MC.ts DELETED
@@ -1,431 +0,0 @@
1
- 'use strict';
2
-
3
- import { LooseObject } from './helpers.js';
4
-
5
- const isBrowser = new Function(
6
- 'try {return this===window;}catch(e){ return false;}'
7
- );
8
-
9
- export interface HTMLMcElement extends HTMLElement {
10
- _mc: LooseObject;
11
- }
12
-
13
- function isDOM(element: { [key: string]: any }) {
14
- return element && element instanceof HTMLElement;
15
- }
16
-
17
- // add a microcomponent to a target DOM node
18
- function add( target: HTMLElement, key: string, element: any = {} ): HTMLMcElement {
19
- let node = target as HTMLMcElement;
20
-
21
- // create the _mc property if necessary
22
- if (!node._mc) {
23
- node._mc = new (DC as any)(target);
24
- }
25
-
26
- const _mc = node._mc;
27
-
28
- // add the element with the given property key to the _mc property
29
- if (key.length && !_mc[key]) {
30
- _mc[key] = element;
31
- // add attribute if HTMLElement
32
- if (target instanceof HTMLElement && ! target.getAttribute('data-mc') ) {
33
- target.setAttribute('data-mc', '');
34
- }
35
- }
36
-
37
- return node;
38
- }
39
-
40
- // remove a micro component from the DOM
41
- function remove(target: HTMLElement, key: string) {
42
- if (!key) return; // silent fail
43
-
44
- const _mc = (target as unknown as HTMLMcElement)?._mc || {};
45
-
46
- // delete the property from the HTMLElement _mc collection
47
- if (_mc && _mc[key]) {
48
- delete _mc[key];
49
- }
50
-
51
- // remove the _mc attribute if the DOM collection is empty
52
- if (
53
- !Object.keys(_mc).length &&
54
- target instanceof HTMLElement &&
55
- target.hasAttribute('data-mc')
56
- ) {
57
- target.removeAttribute('data-mc');
58
- }
59
- return;
60
- }
61
-
62
- // run the "init" lifecycle event on the complete _mc structure
63
- function init(element: DC) {
64
- setTimeout(() => {
65
- if (element.constructor === DC) return;
66
- element.trigger('Init');
67
- }, 0);
68
- }
69
-
70
- // 'eventName' => '_mcEventName'
71
- function getMcEventName( eventName: string ): string {
72
- return '_mc' + eventName[0].toUpperCase() + eventName.substring(1);
73
- }
74
-
75
- /*
76
- CustomEvent Section...
77
- */
78
- function off( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ){
79
- domNode.removeEventListener( getMcEventName(eventName), handler );
80
- }
81
-
82
- function on( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject, once: boolean = false ): EventListenerOrEventListenerObject {
83
- domNode.addEventListener( getMcEventName(eventName), handler, { capture: false, once });
84
- return handler;
85
- }
86
-
87
- function one( domNode: Node, eventName: string, handler: EventListenerOrEventListenerObject ): EventListenerOrEventListenerObject {
88
- on(domNode, eventName, handler, true );
89
- return handler;
90
- }
91
-
92
- class BubbleController{
93
- stopped = false;
94
- constructor(){
95
- }
96
- stop(){
97
- this.stopped = true;
98
- }
99
- }
100
-
101
- // create and dispatch custom event
102
- function trigger(
103
- domNode: HTMLElement,
104
- event: string,
105
- data: any = {},
106
- bubble: string = 'l', // direction of bubbling
107
- controller?: BubbleController
108
- ){
109
- const eventName = /^_mc/.test( event ) ? event : getMcEventName( event ),
110
- bubbleController = !!controller ? controller : new BubbleController(),
111
- ev = new CustomEvent( eventName, { detail: {data,control: bubbleController}, bubbles: false } );
112
-
113
- if ( bubbleController.stopped ) return;
114
-
115
- domNode.dispatchEvent( ev );
116
- ev.stopImmediatePropagation();
117
-
118
- if ( bubbleController.stopped ) return;
119
-
120
- // bubble if up or down is indicated
121
- if( /[ud]/.test( bubble ) ){
122
- //console.log( 'bubble', bubble, domNode );
123
-
124
- // add missing 'l', or else no handlers are executed
125
- if (bubble.indexOf('l') === -1) {
126
- bubble += 'l';
127
- }
128
-
129
- setTimeout(
130
- () => {
131
-
132
- // bubble up towards document.body
133
- if ( bubble.indexOf('u') > -1 ) {
134
- let parentMc: HTMLMcElement | null | undefined = domNode.parentElement?.closest('[data-mc]') ;
135
- if ( !!parentMc ){
136
- parentMc?._mc.trigger( eventName, data, bubble, bubbleController );
137
- }
138
- }
139
-
140
- // bubble down towards DOM children
141
- if (bubble.indexOf('d') > -1) {
142
- let childNodes: DC[] | null = ( domNode as HTMLMcElement)._mc.children();
143
- if( !!childNodes ){
144
- childNodes.forEach( (_mc: DC) => _mc.trigger( eventName, data, bubble ) ); // event multiplex - dont carry bubble controller
145
- }
146
- }
147
- },
148
- 0
149
- );
150
- }
151
- }
152
-
153
- function autoAttachListeners(element: MC | DC) {
154
- if (!isBrowser() || element.constructor === DC) return;
155
-
156
- const target = element.target;
157
-
158
- if (target instanceof HTMLElement) {
159
- let that: LooseObject = element;
160
- Object.getOwnPropertyNames(that.constructor.prototype)
161
- .filter(
162
- (key) =>
163
- /^on[A-Z]|one[A-Z]/.test(key) &&
164
- typeof that.constructor.prototype[key] === 'function'
165
- )
166
- .forEach((key) => {
167
- let once = /^one/.test(key),
168
- withoutOnOne = key.replace(/^on[e]{0,1}/, ''), // preserves upper/lowercase for non-native events
169
- nativeEventName = withoutOnOne.toLowerCase(); // lowercase for native event names
170
-
171
- if ( ('on' + nativeEventName) in target ) { // it is a native HTML event
172
- let listener = (ev: Event) => {
173
- that[key]( ev );
174
- }
175
- // console.log( 'AAL: attach native event listener', nativeEventName, 'to', target );
176
- target.addEventListener( nativeEventName, listener );
177
- } else { // it is a customEvent
178
- // console.log( 'AAL: attach custom event listener', '_mc' + withoutOnOne , 'to key', key, 'in', element );
179
- let listener = (ev: CustomEvent) => {
180
- that[key]( ev );
181
- }
182
- on( target, withoutOnOne, listener as EventListenerOrEventListenerObject, once );
183
- }
184
- });
185
- }
186
- }
187
-
188
- function getMcChildNodes(domNode: HTMLElement): DC[] | null {
189
- const id = Math.random().toString().replace('.', '');
190
- const selector = '[data-mc]:not([temp_id="' + id + '"] [data-mc] [data-mc])';
191
- domNode.setAttribute('temp_id', id);
192
- const mcArray: unknown[] =
193
- ( [ ...domNode.querySelectorAll(selector) ] as HTMLMcElement[])
194
- .filter( (e) => !!e._mc )
195
- .map( e => e._mc );
196
- domNode.removeAttribute('temp_id');
197
- return mcArray.length ? mcArray as DC[] : null;
198
- }
199
-
200
- class McBase {
201
- private _target: WeakRef<any>; // avoid circular reference
202
-
203
- constructor(target?: { [key: string]: any } ) {
204
- let element = this as unknown as MC | DC;
205
-
206
- this._target = new WeakRef(target || {});
207
-
208
- init(element as DC); // async lifecycle event
209
-
210
- autoAttachListeners(element);
211
- }
212
-
213
- get target(): any {
214
- return this._target.deref();
215
- }
216
-
217
- }
218
-
219
- class MC extends McBase {
220
- constructor(target?: any) {
221
- super(target);
222
- }
223
- }
224
-
225
- class DC extends McBase {
226
- constructor(target: HTMLElement) {
227
- super(target);
228
- }
229
-
230
- static add( target: HTMLElement, key: string, element: any = {} ): HTMLMcElement {
231
- return add( target, key, element );
232
- };
233
-
234
- static remove(target: HTMLElement, key: string) {
235
- remove(target, key);
236
- }
237
-
238
- /* event handling */
239
- off( eventName: string, handler: EventListenerOrEventListenerObject ) {
240
- off( this.target, eventName, handler );
241
- }
242
-
243
- on( eventName: string, handler: EventListenerOrEventListenerObject ): EventListenerOrEventListenerObject {
244
- return on( this.target, eventName, handler );
245
- }
246
-
247
- one( eventName: string, handler: EventListenerOrEventListenerObject ): EventListenerOrEventListenerObject {
248
- return one( this.target, eventName, handler );
249
- }
250
-
251
- trigger( eventName: string, data: any = {}, bubble: string = 'l', controller?: BubbleController) {
252
- trigger( this.target, eventName, data, bubble, controller);
253
- }
254
-
255
- /* DOM traversal */
256
- ancestors(): DC[] | null {
257
- let
258
- currentNode: HTMLElement | null = (this as DC)?.target as HTMLMcElement,
259
- result: DC[] = [];
260
-
261
- if (!isDOM( currentNode )) return [];
262
-
263
- while ( currentNode = (currentNode.closest('[data-mc]') ) ){
264
- if ( (currentNode as HTMLMcElement)?._mc ){
265
- result.push( (currentNode as HTMLMcElement)?._mc as DC );
266
- }
267
- }
268
-
269
- return result.length ? result : null;
270
- }
271
-
272
- closest(): DC | null {
273
- let
274
- target: HTMLElement = (this as DC).target;
275
- if (!isDOM(target)) return null;
276
- return (target.closest('[data-mc]') as HTMLMcElement)?._mc as DC || null;
277
- }
278
-
279
- children(): DC[] | null {
280
- let target: any = (this as any)?.target;
281
- if (!isDOM(target)) return null;
282
- return getMcChildNodes(target);
283
- }
284
-
285
- descendants(): DC[] | null {
286
- const target: any = (this as DC)?.target;
287
- if (!isDOM(target)) return [];
288
- const mcArray: unknown[] =
289
- ( [ ...target.querySelectorAll( '[data-mc]' ) ] as HTMLMcElement[])
290
- .filter( (e) => !!e._mc )
291
- .map( e => e._mc );
292
- return mcArray.length ? mcArray as DC[] : null;
293
- }
294
- }
295
-
296
- /*
297
- Autoload Section...
298
- */
299
-
300
- const loadingDCs = new Set<string>();
301
-
302
- function attachDC(element: string): Function {
303
-
304
- //@ts-ignore
305
- return () => {
306
- const elements: HTMLElement[] = Array
307
- .from(document.querySelectorAll(`[data-mc*="${element}"]`))
308
- .filter( element => element instanceof HTMLElement );
309
-
310
- if ( elements.length === 0 ) return;
311
-
312
- //console.log( 'loadedPromise elements', elements );
313
-
314
- const klass = customElements.get( element );
315
-
316
- elements.forEach((node: HTMLElement) => {
317
- //console.log( 'add', klass!.name, 'to', node );
318
- DC.add(node, klass!.name, new klass!(node));
319
-
320
- //@ts-ignore
321
- const new_mc = node
322
- .getAttribute( 'data-mc' )
323
- .split(' ')
324
- .filter( (name) => name !== element && name !== '' )
325
- .join(' ')
326
- .trim();
327
-
328
- //@ts-ignore
329
- node.setAttribute(
330
- 'data-mc',
331
- //@ts-ignore
332
- new_mc
333
- )
334
- });
335
- };
336
- };
337
-
338
- function makeLoadScript( element: string ) {
339
-
340
- if ( loadingDCs.has( element ) ) return; // already loading
341
-
342
- loadingDCs.add( element );
343
-
344
- //console.log( 'makeLoadScript:', element);
345
- const fileName: string = './' + element.split('-').join('/')+'.js';
346
-
347
- const se: HTMLScriptElement = document.createElement('script');
348
-
349
- se.setAttribute('src', fileName);
350
- se.setAttribute('blocking', 'render');
351
- se.async = true;
352
- se.setAttribute('type', 'module');
353
- se.setAttribute( 'data-name', element);
354
- se.setAttribute( 'loading', '');
355
-
356
- const loadedPromise = customElements.whenDefined( element );
357
-
358
- //@ts-ignore
359
- loadedPromise.then( attachDC( element ) );
360
-
361
- se.addEventListener( 'load', (ev: Event) => {
362
- loadingDCs.delete( element );
363
-
364
- document.head.querySelector(`script[data-name="${element}"]`)?.remove();
365
- });
366
-
367
- se.addEventListener( 'error', (ev: Event) => {
368
- console.error('could not load DC code from', fileName);
369
- });
370
-
371
- document.head.append(se);
372
- }
373
-
374
- function loadUndefinedMCs() {
375
-
376
- // load unresolved custom elements
377
- [ ...document.querySelectorAll(':not(:defined)') ]
378
- .filter( (element) => !!element
379
- && !customElements.get(element.tagName.toLowerCase()) // not in CustomElementsRegistry
380
- && !loadingDCs.has(element.tagName.toLowerCase()) // not in loading list
381
- )
382
- .forEach((el) => {
383
- //console.log( 'detected CE', el.tagName.toLowerCase() );
384
- makeLoadScript( el.tagName.toLowerCase() ); // will automatically be instanciated
385
- });
386
-
387
- // if defined in _mc attribute: instanciate DCs, load if necessary
388
- [ ...document.querySelectorAll('[data-mc]:not([data-mc=""]') ]
389
- .filter( (element) => !!element )
390
- .forEach((el) => {
391
- const _mc = el.getAttribute('data-mc')?.split(' ').filter( name => name !== '' );
392
- _mc?.forEach( element => {
393
- //console.log( 'detected DC', dc );
394
- const isDefined = customElements.get(element);
395
- if ( !loadingDCs.has(element) && !isDefined ) {
396
- makeLoadScript( element );
397
- } else if ( isDefined ) {
398
- attachDC(element)();
399
- }
400
- });
401
- });
402
- }
403
-
404
- let autoloadEnabled: boolean = false;
405
- let observer: MutationObserver | null = null;
406
-
407
- function autoload(enable: boolean = true): boolean {
408
-
409
- if (!enable) {
410
- observer?.disconnect();
411
- observer = null;
412
- return autoloadEnabled;
413
- }
414
-
415
- autoloadEnabled = enable;
416
- observer = new MutationObserver(loadUndefinedMCs);
417
-
418
- setTimeout(() => {
419
- observer!.observe(document.body, { childList: true, subtree: true });
420
- loadUndefinedMCs();
421
- }, 5);
422
-
423
- (window as any).autoload = (window as any).autoload || autoload;
424
-
425
- return autoloadEnabled;
426
- }
427
-
428
- (autoload as LooseObject).state = loadingDCs;
429
-
430
- export { McBase, MC, DC, autoload, on, one, off, trigger };
431
-
@@ -1,5 +0,0 @@
1
- export declare function defineCE(tagName: string, DefinitionClass: {
2
- new (...args: any[]): any;
3
- } | Function, observedAttributes?: string[]): void;
4
- export declare function getCE(tagName: string): CustomElementConstructor | undefined;
5
- //# sourceMappingURL=elements.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"elements.d.ts","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"AAoDA,wBAAgB,QAAQ,CACvB,OAAO,EAAE,MAAM,EACf,eAAe,EAAE;IAAE,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,GAAG,CAAA;CAAE,GAAG,QAAQ,EACzD,kBAAkB,GAAE,MAAM,EAAO,QA2DjC;AAED,wBAAgB,KAAK,CAAC,OAAO,EAAE,MAAM,GAAG,wBAAwB,GAAG,SAAS,CAE3E"}
@@ -1,68 +0,0 @@
1
- 'use strict';
2
- import { DC, McBase } from './MC.js';
3
- import { kebabToPascal } from './helpers.js';
4
- class CeBaseClass extends HTMLElement {
5
- constructor() {
6
- super();
7
- }
8
- connectedCallback() {
9
- this.dispatchEvent(new CustomEvent('_mcConnected'));
10
- }
11
- connectedMoveCallback() {
12
- this.dispatchEvent(new CustomEvent('_mcConnectedMove'));
13
- }
14
- disconnectedCallback() {
15
- this.dispatchEvent(new CustomEvent('_mcDisconnected'));
16
- }
17
- adoptedCallback() {
18
- this.dispatchEvent(new CustomEvent('_mcAdopted'));
19
- }
20
- attributeChangedCallback(name, oldValue, newValue) {
21
- this.dispatchEvent(new CustomEvent('_mcAttributeChanged', { detail: { name, oldValue, newValue } }));
22
- }
23
- formResetCallback() {
24
- this.dispatchEvent(new CustomEvent('_mcFormReset'));
25
- }
26
- }
27
- function createNamedClass(name, ClassBody) {
28
- return Object.defineProperty(ClassBody, 'name', { value: name });
29
- }
30
- function isClass(func) {
31
- return typeof func === 'function'
32
- && /^class\s/.test(Function.prototype.toString.call(func));
33
- }
34
- export function defineCE(tagName, DefinitionClass, observedAttributes = []) {
35
- if (customElements.get(tagName)) {
36
- console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
37
- return;
38
- }
39
- if (!tagName.includes('-')) {
40
- throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');
41
- }
42
- let name = kebabToPascal(tagName);
43
- if (!isClass(DefinitionClass.prototype.constructor)) {
44
- customElements.define(tagName, DefinitionClass);
45
- return;
46
- }
47
- if (!(DefinitionClass.prototype instanceof McBase)) {
48
- customElements.define(tagName, DefinitionClass);
49
- return;
50
- }
51
- customElements.define(tagName, createNamedClass(name, class extends CeBaseClass {
52
- instance;
53
- constructor(data) {
54
- super();
55
- const instance = isClass(DefinitionClass)
56
- ? new DefinitionClass(this, data)
57
- : DefinitionClass;
58
- DC.add(this, name, instance);
59
- }
60
- static get observedAttributes() {
61
- return observedAttributes;
62
- }
63
- }));
64
- }
65
- export function getCE(tagName) {
66
- return customElements.get(tagName);
67
- }
68
- //# sourceMappingURL=elements.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"elements.js","sourceRoot":"","sources":["../src/elements.ts"],"names":[],"mappings":"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"}
@@ -1,119 +0,0 @@
1
- 'use strict';
2
-
3
- import { DC, McBase } from './MC.js';
4
- import { kebabToPascal } from './helpers.js';
5
-
6
- class CeBaseClass extends HTMLElement {
7
- constructor() {
8
- super();
9
- }
10
-
11
- connectedCallback() {
12
- this.dispatchEvent( new CustomEvent('_mcConnected') );
13
- }
14
-
15
- connectedMoveCallback() {
16
- this.dispatchEvent( new CustomEvent('_mcConnectedMove') );
17
- }
18
-
19
- disconnectedCallback() {
20
- this.dispatchEvent( new CustomEvent('_mcDisconnected') );
21
- }
22
-
23
- adoptedCallback() {
24
- this.dispatchEvent( new CustomEvent('_mcAdopted') );
25
- }
26
-
27
- attributeChangedCallback(name: string, oldValue: any, newValue: any) {
28
- this.dispatchEvent(
29
- new CustomEvent(
30
- '_mcAttributeChanged',
31
- { detail: { name, oldValue, newValue } }
32
- )
33
- );
34
- }
35
-
36
- formResetCallback(){
37
- this.dispatchEvent( new CustomEvent('_mcFormReset') );
38
- }
39
- }
40
-
41
- function createNamedClass(
42
- name: string,
43
- ClassBody: { new (...args: any[]): any }
44
- ) {
45
- return Object.defineProperty(ClassBody, 'name', { value: name });
46
- }
47
-
48
- function isClass(func: any) {
49
- return typeof func === 'function'
50
- && /^class\s/.test(Function.prototype.toString.call(func));
51
- }
52
-
53
- export function defineCE(
54
- tagName: string,
55
- DefinitionClass: { new (...args: any[]): any } | Function,
56
- observedAttributes: string[] = []
57
- ) {
58
- if (customElements.get(tagName)) {
59
- console.warn(`IGNORED: Custom element "${tagName}" is already defined!`);
60
- return;
61
- }
62
-
63
- if (!tagName.includes('-')) {
64
- throw new Error(
65
- 'createCustomElement: tagName must contain at least one hyphen ("-").'
66
- );
67
- }
68
-
69
- let name = kebabToPascal(tagName);
70
-
71
- // not a class, but a function
72
- if ( !isClass( DefinitionClass.prototype.constructor ) ){
73
- customElements.define(
74
- tagName,
75
- // @ts-ignore
76
- DefinitionClass
77
- );
78
- return;
79
- }
80
-
81
- // a class, but not a MC
82
- if ( !( DefinitionClass.prototype instanceof McBase ) ){
83
- customElements.define(
84
- tagName,
85
- // @ts-ignore
86
- DefinitionClass
87
- );
88
- return;
89
- }
90
-
91
- // a MC
92
- customElements.define(
93
- tagName,
94
- createNamedClass(
95
- name,
96
- class extends CeBaseClass {
97
- instance: any;
98
-
99
- constructor(data?: any) {
100
- super();
101
- // @ts-ignore
102
- const instance = isClass( DefinitionClass )
103
- // @ts-ignore
104
- ? new DefinitionClass(this, data)
105
- : DefinitionClass;
106
- DC.add(this, name, instance);
107
- }
108
-
109
- static get observedAttributes() {
110
- return observedAttributes;
111
- }
112
- }
113
- )
114
- );
115
- }
116
-
117
- export function getCE(tagName: string): CustomElementConstructor | undefined {
118
- return customElements.get(tagName);
119
- }
@@ -1,3 +0,0 @@
1
- import { LooseObject } from './helpers.js';
2
- export declare function formValues(targetObject: LooseObject, propertyName: string, dom: HTMLElement | ShadowRoot): void;
3
- //# sourceMappingURL=formValues.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"formValues.d.ts","sourceRoot":"","sources":["../src/formValues.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAsB,MAAM,cAAc,CAAC;AA0M/D,wBAAgB,UAAU,CACzB,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,MAAM,EACpB,GAAG,EAAE,WAAW,GAAG,UAAU,QAgB7B"}