@twobirds/microcomponents 0.1.1 → 0.1.3

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 (343) hide show
  1. package/dist/MC.d.ts +0 -1
  2. package/dist/MC.js +6 -5
  3. package/dist/MC.min.js +39 -56
  4. package/dist/MC.ts +6 -4
  5. package/dist/elements.d.ts +0 -1
  6. package/dist/elements.js +0 -1
  7. package/dist/elements.min.js +1 -1
  8. package/dist/formValues.d.ts +0 -1
  9. package/dist/formValues.js +0 -1
  10. package/dist/formValues.min.js +1 -1
  11. package/dist/helpers.d.ts +0 -1
  12. package/dist/helpers.js +0 -1
  13. package/dist/microcomponents.d.ts +0 -1
  14. package/dist/microcomponents.js +0 -1
  15. package/dist/microcomponents.min.js +1 -1
  16. package/dist/observables.d.ts +0 -1
  17. package/dist/observables.js +0 -1
  18. package/dist/observables.min.js +1 -1
  19. package/package.json +10 -2
  20. package/.gitlab-ci.yml +0 -18
  21. package/.vscode/settings.json +0 -3
  22. package/MicroComponents.svg +0 -15
  23. package/assets/documentation/MC.md +0 -547
  24. package/assets/documentation/MicroComponents.svg +0 -15
  25. package/assets/documentation/ajaxian-1.png +0 -0
  26. package/assets/documentation/ajaxian-2.png +0 -0
  27. package/assets/documentation/ajaxian-3.png +0 -0
  28. package/assets/documentation/elements.md +0 -277
  29. package/assets/documentation/formvalues.md +0 -25
  30. package/assets/documentation/functional_requirements.md +0 -8
  31. package/assets/documentation/history.md +0 -436
  32. package/assets/documentation/klemmstein.png +0 -0
  33. package/assets/documentation/magic.md +0 -29
  34. package/assets/documentation/observables.md +0 -187
  35. package/assets/documentation/rnd0023-1.jpg +0 -0
  36. package/assets/documentation/rnd0023-2.jpg +0 -0
  37. package/assets/documentation/rnd0023-3.jpg +0 -0
  38. package/assets/documentation/tB_react.md +0 -207
  39. package/assets/documentation/usage.md +0 -142
  40. package/assets/documentation/why.md +0 -25
  41. package/assets/fiddle/MicroComponents.svg +0 -15
  42. package/assets/fiddle/fiddle.css +0 -0
  43. package/assets/fiddle/fiddle.js +0 -0
  44. package/assets/fiddle/index.html +0 -0
  45. package/assets/test/MicroComponents.svg +0 -15
  46. package/assets/test/grandparent.css +0 -16
  47. package/assets/test/myButton.css +0 -19
  48. package/assets/test/style.css +0 -8
  49. package/assets/test/test.html +0 -29
  50. package/assets/test/testform.json +0 -27
  51. package/dist/MC.d.ts.map +0 -1
  52. package/dist/elements.d.ts.map +0 -1
  53. package/dist/formValues.d.ts.map +0 -1
  54. package/dist/helpers.d.ts.map +0 -1
  55. package/dist/microcomponents.d.ts.map +0 -1
  56. package/dist/observables.d.ts.map +0 -1
  57. package/public/.nojekyll +0 -1
  58. package/public/MC.d.ts +0 -39
  59. package/public/MC.d.ts.map +0 -1
  60. package/public/MC.js +0 -287
  61. package/public/MC.js.map +0 -1
  62. package/public/MC.min.js +0 -348
  63. package/public/MC.ts +0 -431
  64. package/public/MicroComponents.svg +0 -15
  65. package/public/documentation/MC.md +0 -547
  66. package/public/documentation/MicroComponents.svg +0 -15
  67. package/public/documentation/ajaxian-1.png +0 -0
  68. package/public/documentation/ajaxian-2.png +0 -0
  69. package/public/documentation/ajaxian-3.png +0 -0
  70. package/public/documentation/elements.md +0 -277
  71. package/public/documentation/formvalues.md +0 -25
  72. package/public/documentation/functional_requirements.md +0 -8
  73. package/public/documentation/history.md +0 -436
  74. package/public/documentation/klemmstein.png +0 -0
  75. package/public/documentation/magic.md +0 -29
  76. package/public/documentation/observables.md +0 -187
  77. package/public/documentation/rnd0023-1.jpg +0 -0
  78. package/public/documentation/rnd0023-2.jpg +0 -0
  79. package/public/documentation/rnd0023-3.jpg +0 -0
  80. package/public/documentation/tB_react.md +0 -207
  81. package/public/documentation/usage.md +0 -142
  82. package/public/documentation/why.md +0 -25
  83. package/public/elements.d.ts +0 -5
  84. package/public/elements.d.ts.map +0 -1
  85. package/public/elements.js +0 -68
  86. package/public/elements.js.map +0 -1
  87. package/public/elements.min.js +0 -1
  88. package/public/elements.ts +0 -119
  89. package/public/fiddle/MicroComponents.svg +0 -15
  90. package/public/fiddle/fiddle.css +0 -0
  91. package/public/fiddle/fiddle.js +0 -0
  92. package/public/fiddle/index.html +0 -0
  93. package/public/formValues.d.ts +0 -3
  94. package/public/formValues.d.ts.map +0 -1
  95. package/public/formValues.js +0 -162
  96. package/public/formValues.js.map +0 -1
  97. package/public/formValues.min.js +0 -1
  98. package/public/formValues.ts +0 -225
  99. package/public/helpers.d.ts +0 -14
  100. package/public/helpers.d.ts.map +0 -1
  101. package/public/helpers.js +0 -113
  102. package/public/helpers.js.map +0 -1
  103. package/public/helpers.ts +0 -149
  104. package/public/microcomponents.d.ts +0 -6
  105. package/public/microcomponents.d.ts.map +0 -1
  106. package/public/microcomponents.js +0 -7
  107. package/public/microcomponents.js.map +0 -1
  108. package/public/microcomponents.min.js +0 -1
  109. package/public/microcomponents.ts +0 -8
  110. package/public/observables.d.ts +0 -11
  111. package/public/observables.d.ts.map +0 -1
  112. package/public/observables.js +0 -244
  113. package/public/observables.js.map +0 -1
  114. package/public/observables.min.js +0 -1
  115. package/public/observables.ts +0 -416
  116. package/public/selectors._ts +0 -1269
  117. package/public/src/MC.d.ts +0 -39
  118. package/public/src/MC.d.ts.map +0 -1
  119. package/public/src/MC.js +0 -287
  120. package/public/src/MC.js.map +0 -1
  121. package/public/src/MC.ts +0 -431
  122. package/public/src/elements.d.ts +0 -5
  123. package/public/src/elements.d.ts.map +0 -1
  124. package/public/src/elements.js +0 -68
  125. package/public/src/elements.js.map +0 -1
  126. package/public/src/elements.ts +0 -119
  127. package/public/src/formValues.d.ts +0 -3
  128. package/public/src/formValues.d.ts.map +0 -1
  129. package/public/src/formValues.js +0 -162
  130. package/public/src/formValues.js.map +0 -1
  131. package/public/src/formValues.ts +0 -225
  132. package/public/src/helpers.d.ts +0 -14
  133. package/public/src/helpers.d.ts.map +0 -1
  134. package/public/src/helpers.js +0 -113
  135. package/public/src/helpers.js.map +0 -1
  136. package/public/src/helpers.ts +0 -149
  137. package/public/src/microcomponents.d.ts +0 -6
  138. package/public/src/microcomponents.d.ts.map +0 -1
  139. package/public/src/microcomponents.js +0 -7
  140. package/public/src/microcomponents.js.map +0 -1
  141. package/public/src/microcomponents.ts +0 -8
  142. package/public/src/observables.d.ts +0 -11
  143. package/public/src/observables.d.ts.map +0 -1
  144. package/public/src/observables.js +0 -244
  145. package/public/src/observables.js.map +0 -1
  146. package/public/src/observables.ts +0 -416
  147. package/public/src/selectors._ts +0 -1269
  148. package/public/src/test/grandparent.css +0 -14
  149. package/public/src/test/test/child.d.ts +0 -2
  150. package/public/src/test/test/child.d.ts.map +0 -1
  151. package/public/src/test/test/child.js +0 -26
  152. package/public/src/test/test/child.js.map +0 -1
  153. package/public/src/test/test/child.ts +0 -36
  154. package/public/src/test/test/grandchild.d.ts +0 -2
  155. package/public/src/test/test/grandchild.d.ts.map +0 -1
  156. package/public/src/test/test/grandchild.js +0 -22
  157. package/public/src/test/test/grandchild.js.map +0 -1
  158. package/public/src/test/test/grandchild.ts +0 -31
  159. package/public/src/test/test/grandparent.d.ts +0 -2
  160. package/public/src/test/test/grandparent.d.ts.map +0 -1
  161. package/public/src/test/test/grandparent.js +0 -1
  162. package/public/src/test/test/grandparent.js.map +0 -1
  163. package/public/src/test/test/grandparent.ts +0 -43
  164. package/public/src/test/test/greatgrandchild.d.ts +0 -2
  165. package/public/src/test/test/greatgrandchild.d.ts.map +0 -1
  166. package/public/src/test/test/greatgrandchild.js +0 -36
  167. package/public/src/test/test/greatgrandchild.js.map +0 -1
  168. package/public/src/test/test/greatgrandchild.ts +0 -51
  169. package/public/src/test/test/parent.d.ts +0 -2
  170. package/public/src/test/test/parent.d.ts.map +0 -1
  171. package/public/src/test/test/parent.js +0 -25
  172. package/public/src/test/test/parent.js.map +0 -1
  173. package/public/src/test/test/parent.ts +0 -35
  174. package/public/src/test/test/testform.d.ts +0 -2
  175. package/public/src/test/test/testform.d.ts.map +0 -1
  176. package/public/src/test/test/testform.js +0 -1
  177. package/public/src/test/test/testform.js.map +0 -1
  178. package/public/src/test/test/testform.ts +0 -153
  179. package/public/src/test/test/testfunction.d.ts +0 -3
  180. package/public/src/test/test/testfunction.d.ts.map +0 -1
  181. package/public/src/test/test/testfunction.js +0 -7
  182. package/public/src/test/test/testfunction.js.map +0 -1
  183. package/public/src/test/test/testfunction.ts +0 -12
  184. package/public/src/test/test/testmc.d.ts +0 -3
  185. package/public/src/test/test/testmc.d.ts.map +0 -1
  186. package/public/src/test/test/testmc.js +0 -10
  187. package/public/src/test/test/testmc.js.map +0 -1
  188. package/public/src/test/test/testmc.ts +0 -16
  189. package/public/src/test/test/testsimpleclass.d.ts +0 -3
  190. package/public/src/test/test/testsimpleclass.d.ts.map +0 -1
  191. package/public/src/test/test/testsimpleclass.js +0 -9
  192. package/public/src/test/test/testsimpleclass.js.map +0 -1
  193. package/public/src/test/test/testsimpleclass.ts +0 -15
  194. package/public/src/test/test.d.ts +0 -2
  195. package/public/src/test/test.d.ts.map +0 -1
  196. package/public/src/test/test.js +0 -72
  197. package/public/src/test/test.js.map +0 -1
  198. package/public/src/test/test.ts +0 -176
  199. package/public/src/test/testform.css +0 -47
  200. package/public/src/test/testform.html +0 -56
  201. package/public/src/test/testform.json +0 -27
  202. package/public/test/MC.d.ts +0 -39
  203. package/public/test/MC.d.ts.map +0 -1
  204. package/public/test/MC.js +0 -287
  205. package/public/test/MC.min.js +0 -348
  206. package/public/test/MC.ts +0 -431
  207. package/public/test/MicroComponents.svg +0 -15
  208. package/public/test/elements.d.ts +0 -5
  209. package/public/test/elements.d.ts.map +0 -1
  210. package/public/test/elements.js +0 -68
  211. package/public/test/elements.min.js +0 -1
  212. package/public/test/elements.ts +0 -119
  213. package/public/test/formValues.d.ts +0 -3
  214. package/public/test/formValues.d.ts.map +0 -1
  215. package/public/test/formValues.js +0 -162
  216. package/public/test/formValues.min.js +0 -1
  217. package/public/test/formValues.ts +0 -225
  218. package/public/test/grandparent.css +0 -14
  219. package/public/test/helpers.d.ts +0 -14
  220. package/public/test/helpers.d.ts.map +0 -1
  221. package/public/test/helpers.js +0 -113
  222. package/public/test/helpers.ts +0 -149
  223. package/public/test/microcomponents.d.ts +0 -6
  224. package/public/test/microcomponents.d.ts.map +0 -1
  225. package/public/test/microcomponents.js +0 -7
  226. package/public/test/microcomponents.min.js +0 -1
  227. package/public/test/microcomponents.ts +0 -8
  228. package/public/test/myButton.css +0 -19
  229. package/public/test/observables.d.ts +0 -11
  230. package/public/test/observables.d.ts.map +0 -1
  231. package/public/test/observables.js +0 -244
  232. package/public/test/observables.min.js +0 -1
  233. package/public/test/observables.ts +0 -416
  234. package/public/test/style.css +0 -8
  235. package/public/test/test/child.d.ts +0 -2
  236. package/public/test/test/child.d.ts.map +0 -1
  237. package/public/test/test/child.js +0 -26
  238. package/public/test/test/child.js.map +0 -1
  239. package/public/test/test/child.ts +0 -36
  240. package/public/test/test/grandchild.d.ts +0 -2
  241. package/public/test/test/grandchild.d.ts.map +0 -1
  242. package/public/test/test/grandchild.js +0 -22
  243. package/public/test/test/grandchild.js.map +0 -1
  244. package/public/test/test/grandchild.ts +0 -31
  245. package/public/test/test/grandparent.d.ts +0 -2
  246. package/public/test/test/grandparent.d.ts.map +0 -1
  247. package/public/test/test/grandparent.js +0 -1
  248. package/public/test/test/grandparent.js.map +0 -1
  249. package/public/test/test/grandparent.ts +0 -43
  250. package/public/test/test/greatgrandchild.d.ts +0 -2
  251. package/public/test/test/greatgrandchild.d.ts.map +0 -1
  252. package/public/test/test/greatgrandchild.js +0 -36
  253. package/public/test/test/greatgrandchild.js.map +0 -1
  254. package/public/test/test/greatgrandchild.ts +0 -51
  255. package/public/test/test/parent.d.ts +0 -2
  256. package/public/test/test/parent.d.ts.map +0 -1
  257. package/public/test/test/parent.js +0 -25
  258. package/public/test/test/parent.js.map +0 -1
  259. package/public/test/test/parent.ts +0 -35
  260. package/public/test/test/testform.d.ts +0 -2
  261. package/public/test/test/testform.d.ts.map +0 -1
  262. package/public/test/test/testform.js +0 -1
  263. package/public/test/test/testform.js.map +0 -1
  264. package/public/test/test/testform.ts +0 -153
  265. package/public/test/test/testfunction.d.ts +0 -3
  266. package/public/test/test/testfunction.d.ts.map +0 -1
  267. package/public/test/test/testfunction.js +0 -7
  268. package/public/test/test/testfunction.js.map +0 -1
  269. package/public/test/test/testfunction.ts +0 -12
  270. package/public/test/test/testmc.d.ts +0 -3
  271. package/public/test/test/testmc.d.ts.map +0 -1
  272. package/public/test/test/testmc.js +0 -10
  273. package/public/test/test/testmc.js.map +0 -1
  274. package/public/test/test/testmc.ts +0 -16
  275. package/public/test/test/testsimpleclass.d.ts +0 -3
  276. package/public/test/test/testsimpleclass.d.ts.map +0 -1
  277. package/public/test/test/testsimpleclass.js +0 -9
  278. package/public/test/test/testsimpleclass.js.map +0 -1
  279. package/public/test/test/testsimpleclass.ts +0 -15
  280. package/public/test/test.d.ts +0 -2
  281. package/public/test/test.d.ts.map +0 -1
  282. package/public/test/test.html +0 -29
  283. package/public/test/test.js +0 -72
  284. package/public/test/test.js.map +0 -1
  285. package/public/test/test.ts +0 -176
  286. package/public/test/testform.css +0 -47
  287. package/public/test/testform.html +0 -56
  288. package/public/test/testform.json +0 -27
  289. package/public/typedoc/.nojekyll +0 -1
  290. package/public/typedoc/assets/highlight.css +0 -106
  291. package/public/typedoc/assets/icons.js +0 -18
  292. package/public/typedoc/assets/icons.svg +0 -1
  293. package/public/typedoc/assets/main.js +0 -60
  294. package/public/typedoc/assets/navigation.js +0 -1
  295. package/public/typedoc/assets/search.js +0 -1
  296. package/public/typedoc/assets/style.css +0 -1493
  297. package/public/typedoc/classes/MC.DC.html +0 -13
  298. package/public/typedoc/classes/MC.MC.html +0 -3
  299. package/public/typedoc/classes/MC.McBase.html +0 -3
  300. package/public/typedoc/functions/MC.autoload.html +0 -1
  301. package/public/typedoc/functions/MC.off.html +0 -1
  302. package/public/typedoc/functions/MC.on.html +0 -1
  303. package/public/typedoc/functions/MC.one.html +0 -1
  304. package/public/typedoc/functions/MC.trigger.html +0 -1
  305. package/public/typedoc/functions/elements.defineCE.html +0 -1
  306. package/public/typedoc/functions/elements.getCE.html +0 -1
  307. package/public/typedoc/functions/formValues.formValues.html +0 -1
  308. package/public/typedoc/functions/observables.observe.html +0 -1
  309. package/public/typedoc/hierarchy.html +0 -1
  310. package/public/typedoc/index.html +0 -122
  311. package/public/typedoc/interfaces/MC.HTMLMcElement.html +0 -758
  312. package/public/typedoc/media/MicroComponents.svg +0 -15
  313. package/public/typedoc/modules/MC.html +0 -10
  314. package/public/typedoc/modules/elements.html +0 -3
  315. package/public/typedoc/modules/formValues.html +0 -2
  316. package/public/typedoc/modules/observables.html +0 -3
  317. package/public/typedoc/modules.html +0 -5
  318. package/public/typedoc/types/observables.Observable.html +0 -1
  319. package/src/MC.ts +0 -431
  320. package/src/elements.ts +0 -119
  321. package/src/formValues.ts +0 -225
  322. package/src/helpers.ts +0 -149
  323. package/src/microcomponents.ts +0 -8
  324. package/src/observables.ts +0 -416
  325. package/src/selectors._ts +0 -1269
  326. package/src/test/grandparent.css +0 -14
  327. package/src/test/test/child.ts +0 -36
  328. package/src/test/test/grandchild.ts +0 -31
  329. package/src/test/test/grandparent.ts +0 -43
  330. package/src/test/test/greatgrandchild.ts +0 -51
  331. package/src/test/test/parent.ts +0 -35
  332. package/src/test/test/testform.ts +0 -153
  333. package/src/test/test/testfunction.ts +0 -12
  334. package/src/test/test/testmc.ts +0 -16
  335. package/src/test/test/testsimpleclass.ts +0 -15
  336. package/src/test/test.ts +0 -176
  337. package/src/test/testform.css +0 -47
  338. package/src/test/testform.html +0 -56
  339. package/src/test/testform.json +0 -27
  340. package/tasks.md +0 -36
  341. package/tsconfig.json +0 -107
  342. package/typedoc.json +0 -7
  343. package/webpack.config.js +0 -346
package/public/test/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,15 +0,0 @@
1
- <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
2
- <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
3
- <title>test</title>
4
- <rect fill="transparent" x="0" y="0" width="200" height="200" fill-opacity="1"/>
5
- <g style="fill:transparent">
6
- <title>first bird</title>
7
- <path fill="#18829c" d="
8
- m15,160
9
- a30,75 45 1 0 160,-150
10
- a20,50 225 1 1 -110,100
11
- a12,25 45 1 1 60,-50
12
- a20,50 225 1 0 -110,100
13
- " />
14
- </g>
15
- </svg>
@@ -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
- !function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.elements=e():t.elements=e()}(this,(()=>(()=>{"use strict";var t={d:(e,n)=>{for(var r in n)t.o(n,r)&&!t.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:n[r]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e),r:t=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})}},e={};t.r(e),t.d(e,{defineCE:()=>d,getCE:()=>m});const n=new Function("try {return this===window;}catch(e){ return false;}");function r(t){return t&&t instanceof HTMLElement}function o(t){return"_mc"+t[0].toUpperCase()+t.substring(1)}function c(t,e,n,r=!1){return t.addEventListener(o(e),n,{capture:!1,once:r}),n}class s{stopped=!1;constructor(){}stop(){this.stopped=!0}}class i{_target;constructor(t){var e;this._target=new WeakRef(t||{}),e=this,setTimeout((()=>{e.constructor!==a&&e.trigger("Init")}),0),function(t){if(!n()||t.constructor===a)return;const e=t.target;if(e instanceof HTMLElement){let n=t;Object.getOwnPropertyNames(n.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof n.constructor.prototype[t])).forEach((t=>{let r=/^one/.test(t),o=t.replace(/^on[e]{0,1}/,""),s=o.toLowerCase();if("on"+s in e){let r=e=>{n[t](e)};e.addEventListener(s,r)}else c(e,o,(e=>{n[t](e)}),r)}))}}(this)}get target(){return this._target.deref()}}class a extends i{constructor(t){super(t)}static add(t,e,n={}){return function(t,e,n={}){let r=t;r._mc||(r._mc=new a(t));const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("data-mc")&&t.setAttribute("data-mc","")),r}(t,e,n)}static remove(t,e){!function(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("data-mc")&&t.removeAttribute("data-mc")}(t,e)}off(t,e){!function(t,e,n){t.removeEventListener(o(e),n)}(this.target,t,e)}on(t,e){return c(this.target,t,e)}one(t,e){return function(t,e,n){return c(t,e,n,!0),n}(this.target,t,e)}trigger(t,e={},n="l",r){!function(t,e,n={},r="l",c){const i=/^_mc/.test(e)?e:o(e),a=c||new s,u=new CustomEvent(i,{detail:{data:n,control:a},bubbles:!1});a.stopped||(t.dispatchEvent(u),u.stopImmediatePropagation(),a.stopped||/[ud]/.test(r)&&(-1===r.indexOf("l")&&(r+="l"),setTimeout((()=>{if(r.indexOf("u")>-1){let e=t.parentElement?.closest("[data-mc]");e&&e?._mc.trigger(i,n,r,a)}if(r.indexOf("d")>-1){let e=t._mc.children();e&&e.forEach((t=>t.trigger(i,n,r)))}}),0)))}(this.target,t,e,n,r)}ancestors(){let t=this?.target,e=[];if(!r(t))return[];for(;t=t.closest("[data-mc]");)t?._mc&&e.push(t?._mc);return e.length?e:null}closest(){let t=this.target;return r(t)&&t.closest("[data-mc]")?._mc||null}children(){let t=this?.target;return r(t)?function(t){const e=Math.random().toString().replace(".",""),n='[data-mc]:not([temp_id="'+e+'"] [data-mc] [data-mc])';t.setAttribute("temp_id",e);const r=[...t.querySelectorAll(n)].filter((t=>!!t._mc)).map((t=>t._mc));return t.removeAttribute("temp_id"),r.length?r:null}(t):null}descendants(){const t=this?.target;if(!r(t))return[];const e=[...t.querySelectorAll("[data-mc]")].filter((t=>!!t._mc)).map((t=>t._mc));return e.length?e:null}}new Set;class u extends HTMLElement{constructor(){super()}connectedCallback(){this.dispatchEvent(new CustomEvent("_mcConnected"))}connectedMoveCallback(){this.dispatchEvent(new CustomEvent("_mcConnectedMove"))}disconnectedCallback(){this.dispatchEvent(new CustomEvent("_mcDisconnected"))}adoptedCallback(){this.dispatchEvent(new CustomEvent("_mcAdopted"))}attributeChangedCallback(t,e,n){this.dispatchEvent(new CustomEvent("_mcAttributeChanged",{detail:{name:t,oldValue:e,newValue:n}}))}formResetCallback(){this.dispatchEvent(new CustomEvent("_mcFormReset"))}}function l(t){return"function"==typeof t&&/^class\s/.test(Function.prototype.toString.call(t))}function d(t,e,n=[]){if(customElements.get(t))return void console.warn(`IGNORED: Custom element "${t}" is already defined!`);if(!t.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=t.split("-").map((t=>t.charAt(0).toUpperCase()+t.slice(1))).join("");l(e.prototype.constructor)&&e.prototype instanceof i?customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends u{instance;constructor(t){super();const n=l(e)?new e(this,t):e;a.add(this,r,n)}static get observedAttributes(){return n}})):customElements.define(t,e)}function m(t){return customElements.get(t)}return e})()));
@@ -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"}