@twobirds/microcomponents 0.0.65 → 0.0.66
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.
- package/assets/documentation/MC.md +22 -28
- package/assets/documentation/elements.md +4 -2
- package/assets/documentation/observables.md +2 -0
- package/assets/test.html +1 -1
- package/dist/MC.d.ts.map +1 -1
- package/dist/MC.min.js +20 -15
- package/dist/MC.ts +23 -16
- package/dist/elements.min.js +1 -1
- package/dist/formvValues.min.js +1 -1
- package/dist/microcomponents.min.js +1 -1
- package/dist/observables.d.ts.map +1 -1
- package/dist/observables.min.js +1 -1
- package/dist/observables.ts +0 -3
- package/dist/selectors.min.js +1 -1
- package/package.json +4 -4
- package/public/MC.js +20 -15
- package/public/MC.js.map +1 -1
- package/public/MC.min.js +20 -15
- package/public/assets/highlight.css +99 -0
- package/public/assets/icons.js +18 -0
- package/public/assets/icons.svg +1 -0
- package/public/assets/main.js +60 -0
- package/public/assets/navigation.js +1 -0
- package/public/assets/search.js +1 -0
- package/public/assets/style.css +1493 -0
- package/public/classes/MC.DC.html +12 -0
- package/public/classes/MC.MC.html +6 -0
- package/public/classes/MC.McBase.html +3 -0
- package/public/classes/MC.McEvent.html +9 -0
- package/public/elements.min.js +1 -1
- package/public/formvValues.min.js +1 -1
- package/public/functions/MC.addListener.html +1 -0
- package/public/functions/MC.autoload.html +1 -0
- package/public/functions/MC.removeListener.html +1 -0
- package/public/functions/elements.defineCE.html +1 -0
- package/public/functions/elements.getCE.html +1 -0
- package/public/functions/formValues.formValues.html +1 -0
- package/public/functions/observables.observe.html +1 -0
- package/public/functions/selectors._d.html +1 -0
- package/public/functions/selectors._t.html +1 -0
- package/public/hierarchy.html +1 -0
- package/public/index.html +56 -0
- package/public/interfaces/MC.HTMLMcElement.html +758 -0
- package/public/interfaces/selectors.DSelector.html +50 -0
- package/public/interfaces/selectors.TSelector.html +34 -0
- package/public/microcomponents.min.js +1 -1
- package/public/modules/MC.html +9 -0
- package/public/modules/elements.html +3 -0
- package/public/modules/formValues.html +2 -0
- package/public/modules/observables.html +3 -0
- package/public/modules/selectors.html +7 -0
- package/public/modules.html +6 -0
- package/public/observables.js.map +1 -1
- package/public/observables.min.js +1 -1
- package/public/selectors.min.js +1 -1
- package/public/types/observables.Observable.html +1 -0
- package/public/types/selectors.selection.html +1 -0
- package/public/types/selectors.singleSelector.html +1 -0
- package/src/MC.ts +23 -16
- package/src/observables.ts +0 -3
- package/src/test/testmc.ts +7 -1
- package/assets/documentation/comparision.md +0 -0
- package/assets/documentation/how_tos.md +0 -0
- package/assets/documentation/introduction.md +0 -0
- package/assets/documentation/proposal_draft.md +0 -37
- package/public/3d.html +0 -42
- package/public/documentation/MC.md +0 -594
- package/public/documentation/ajaxian-1.png +0 -0
- package/public/documentation/ajaxian-2.png +0 -0
- package/public/documentation/ajaxian-3.png +0 -0
- package/public/documentation/comparision.md +0 -0
- package/public/documentation/elements.md +0 -276
- package/public/documentation/functional_requirements.md +0 -8
- package/public/documentation/history.md +0 -436
- package/public/documentation/how_tos.md +0 -0
- package/public/documentation/introduction.md +0 -0
- package/public/documentation/magic.md +0 -29
- package/public/documentation/observables.md +0 -105
- package/public/documentation/proposal_draft.md +0 -37
- package/public/documentation/rnd0023-1.jpg +0 -0
- package/public/documentation/rnd0023-2.jpg +0 -0
- package/public/documentation/rnd0023-3.jpg +0 -0
- package/public/documentation/tB_react.md +0 -207
- package/public/documentation/usage.md +0 -142
- package/public/documentation/why.md +0 -25
- package/public/fiddle/MicroComponents.svg +0 -15
- package/public/fiddle/fiddle.css +0 -0
- package/public/fiddle/fiddle.js +0 -0
- package/public/fiddle/index.html +0 -0
- package/public/grandparent.css +0 -13
- package/public/my-tag.css +0 -19
- package/public/src/MC.ts +0 -598
- package/public/src/McEvent.ts +0 -96
- package/public/src/autoloader.ts +0 -98
- package/public/src/elements.ts +0 -76
- package/public/src/formValues.ts +0 -233
- package/public/src/helpers.ts +0 -149
- package/public/src/microcomponents.ts +0 -8
- package/public/src/observables.ts +0 -404
- package/public/src/selectors.ts +0 -1634
- package/public/src/test.ts +0 -193
- package/public/test/child.js +0 -15
- package/public/test/child.js.map +0 -1
- package/public/test/grandchild.js +0 -15
- package/public/test/grandchild.js.map +0 -1
- package/public/test/grandparent.js +0 -1
- package/public/test/grandparent.js.map +0 -1
- package/public/test/greatgrandchild.js +0 -29
- package/public/test/greatgrandchild.js.map +0 -1
- package/public/test/parent.js +0 -15
- package/public/test/parent.js.map +0 -1
- package/public/test/testform.js +0 -1
- package/public/test/testform.js.map +0 -1
- package/public/test/testmc.js +0 -10
- package/public/test/testmc.js.map +0 -1
- package/public/test.html +0 -27
- /package/public/{MicroComponents.svg → media/MicroComponents.svg} +0 -0
package/public/src/test.ts
DELETED
|
@@ -1,193 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
import {
|
|
4
|
-
LooseObject,
|
|
5
|
-
DC,
|
|
6
|
-
McEvent,
|
|
7
|
-
defineCE,
|
|
8
|
-
getCE,
|
|
9
|
-
observe,
|
|
10
|
-
Observable,
|
|
11
|
-
} from './microcomponents.js';
|
|
12
|
-
|
|
13
|
-
class Translator extends DC {
|
|
14
|
-
#translations: LooseObject = {};
|
|
15
|
-
|
|
16
|
-
Language: unknown = 'en';
|
|
17
|
-
Translation: unknown = {};
|
|
18
|
-
|
|
19
|
-
constructor(
|
|
20
|
-
target: HTMLElement | ShadowRoot | DocumentFragment,
|
|
21
|
-
translations: LooseObject,
|
|
22
|
-
translationTargetObject: HTMLElement
|
|
23
|
-
) {
|
|
24
|
-
super(target as HTMLElement);
|
|
25
|
-
let that = this; // minifier help
|
|
26
|
-
|
|
27
|
-
// state
|
|
28
|
-
that.Language = 'en';
|
|
29
|
-
that.Translation = {};
|
|
30
|
-
|
|
31
|
-
observe(that);
|
|
32
|
-
|
|
33
|
-
// setup
|
|
34
|
-
that.#translations = translations;
|
|
35
|
-
|
|
36
|
-
// state
|
|
37
|
-
(that.Language as Observable).observe((lang) => {
|
|
38
|
-
if (that.#translations.hasOwnProperty(lang)) {
|
|
39
|
-
that.Translation = { lang: that.#translations[lang] }; // set translation
|
|
40
|
-
}
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
(that.Translation as Observable).bind(translationTargetObject);
|
|
44
|
-
|
|
45
|
-
that.target.setAttribute('language', 'en');
|
|
46
|
-
|
|
47
|
-
(that.Language as Observable).notify();
|
|
48
|
-
|
|
49
|
-
delete that._mc; // cleanup, not needed
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
onAttributeChanged(ev: McEvent) {
|
|
53
|
-
if (!ev.data.newValue) return;
|
|
54
|
-
switch (ev.data.name) {
|
|
55
|
-
case 'language':
|
|
56
|
-
this.Language = ev.data.newValue;
|
|
57
|
-
break;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
defineCE(
|
|
63
|
-
// equivalent to custom element registry .define()
|
|
64
|
-
'my-tag',
|
|
65
|
-
class MyTag extends DC {
|
|
66
|
-
#template: string = '<button>{lang.click} {counter}</button>';
|
|
67
|
-
|
|
68
|
-
#languages = {
|
|
69
|
-
en: {
|
|
70
|
-
click: 'click me',
|
|
71
|
-
},
|
|
72
|
-
de: {
|
|
73
|
-
click: 'klick mich',
|
|
74
|
-
},
|
|
75
|
-
};
|
|
76
|
-
|
|
77
|
-
Dom: LooseObject = {};
|
|
78
|
-
|
|
79
|
-
constructor(target: HTMLElement) {
|
|
80
|
-
super(target);
|
|
81
|
-
|
|
82
|
-
let that = this; // minifier help
|
|
83
|
-
|
|
84
|
-
// render
|
|
85
|
-
target.innerHTML = this.#template;
|
|
86
|
-
|
|
87
|
-
// add translator
|
|
88
|
-
DC.add(
|
|
89
|
-
target,
|
|
90
|
-
'translator',
|
|
91
|
-
new Translator(target, that.#languages, target)
|
|
92
|
-
);
|
|
93
|
-
|
|
94
|
-
delete that._mc; // cleanup, not needed
|
|
95
|
-
}
|
|
96
|
-
|
|
97
|
-
oneInit(ev: McEvent) {
|
|
98
|
-
let that = this;
|
|
99
|
-
|
|
100
|
-
// state
|
|
101
|
-
that.Dom = { counter: 0 };
|
|
102
|
-
|
|
103
|
-
// state: convert all props defined so far into observables
|
|
104
|
-
observe(that);
|
|
105
|
-
|
|
106
|
-
// bind Dom to target
|
|
107
|
-
(that.Dom as Observable).bind(that.target);
|
|
108
|
-
}
|
|
109
|
-
|
|
110
|
-
onClick(ev: McEvent) {
|
|
111
|
-
const that = this,
|
|
112
|
-
c = that.Dom.counter++;
|
|
113
|
-
(ev.data as PointerEvent).stopPropagation();
|
|
114
|
-
(that.target as HTMLElement).classList.remove('clicked');
|
|
115
|
-
(that.target as HTMLElement).classList.add(
|
|
116
|
-
that.Dom.counter > 9 ? 'overClicked' : 'clicked'
|
|
117
|
-
);
|
|
118
|
-
}
|
|
119
|
-
},
|
|
120
|
-
['language']
|
|
121
|
-
);
|
|
122
|
-
|
|
123
|
-
let MyTag: CustomElementConstructor = getCE('my-tag')!,
|
|
124
|
-
fragment = new DocumentFragment();
|
|
125
|
-
|
|
126
|
-
/*
|
|
127
|
-
stress test
|
|
128
|
-
*/
|
|
129
|
-
|
|
130
|
-
let start = new Date().getTime(),
|
|
131
|
-
max = 1000;
|
|
132
|
-
|
|
133
|
-
// create 1000 elements
|
|
134
|
-
for (let x = 0; x < max; x++) {
|
|
135
|
-
fragment.append(new MyTag());
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
let end = new Date().getTime();
|
|
139
|
-
|
|
140
|
-
// and put them into the DOM
|
|
141
|
-
document.body.appendChild(fragment);
|
|
142
|
-
|
|
143
|
-
//document.querySelectorAll('my-tag').forEach((e) => e.remove());
|
|
144
|
-
|
|
145
|
-
/*
|
|
146
|
-
console test
|
|
147
|
-
*/
|
|
148
|
-
|
|
149
|
-
setTimeout(() => {
|
|
150
|
-
// console.clear();
|
|
151
|
-
|
|
152
|
-
console.log(
|
|
153
|
-
'%c \n\nStress Test:\n\n %cInstancing %s web components (%s classes): %c %s ms.',
|
|
154
|
-
'font-weight: bold; color: black;',
|
|
155
|
-
'font-weight: normal;',
|
|
156
|
-
max,
|
|
157
|
-
max * 3,
|
|
158
|
-
'font-weight: bold; color: blue;',
|
|
159
|
-
end - start
|
|
160
|
-
);
|
|
161
|
-
|
|
162
|
-
//document.body.appendChild(new MyTag());
|
|
163
|
-
|
|
164
|
-
let element = document.querySelector('my-tag');
|
|
165
|
-
|
|
166
|
-
console.log(
|
|
167
|
-
"\n\n%cInspect this tag:%c \n( ...to see the inner structure in the '._mc' property )\n\n %O %c %s",
|
|
168
|
-
'font-weight: bold;',
|
|
169
|
-
'font-weight: normal;',
|
|
170
|
-
element,
|
|
171
|
-
'font-weight: bold;',
|
|
172
|
-
'\n\nLook up code in the debugger: test.js\n'
|
|
173
|
-
);
|
|
174
|
-
|
|
175
|
-
let form = ( document.querySelector('test-testform') as any);
|
|
176
|
-
let formData = form._mc.TestTestform.data;
|
|
177
|
-
|
|
178
|
-
console.log(
|
|
179
|
-
"\n\n%cRight-click this object and store it as a global variable:%c \n\n %O %c %s %c %s %c %s",
|
|
180
|
-
'font-weight: bold;',
|
|
181
|
-
'font-weight: normal;',
|
|
182
|
-
formData,
|
|
183
|
-
'font-weight: bold;',
|
|
184
|
-
'\n\nYou can then use e.g. \n\n',
|
|
185
|
-
'font-weight: normal;',
|
|
186
|
-
' temp0.textInput = "whatever"',
|
|
187
|
-
'font-weight: bold;',
|
|
188
|
-
'\n\nto change the form contents.\n'
|
|
189
|
-
);
|
|
190
|
-
|
|
191
|
-
// will trigger the event on all micro components contained in <my-tag>
|
|
192
|
-
DC.trigger(element, 'doSomething');
|
|
193
|
-
}, 500);
|
package/public/test/child.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { DC, defineCE, getCE } from '.././microcomponents.js';
|
|
2
|
-
import { Grandchild } from './grandchild.js';
|
|
3
|
-
defineCE('test-child', class TestChild extends DC {
|
|
4
|
-
constructor(target) {
|
|
5
|
-
super(target);
|
|
6
|
-
}
|
|
7
|
-
onConnected() {
|
|
8
|
-
let that = this;
|
|
9
|
-
for (let x = 0; x < 10; x++) {
|
|
10
|
-
that.target.append(new Grandchild());
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
export const Child = getCE('test-child');
|
|
15
|
-
//# sourceMappingURL=child.js.map
|
package/public/test/child.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"child.js","sourceRoot":"","sources":["../../src/test/child.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAC7C,QAAQ,CACP,YAAY,EAEZ,MAAM,SAAU,SAAQ,EAAE;IACzB,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC;YAC7B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,UAAW,EAAE,CAAC,CAAC;QACvC,CAAC;IACF,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC"}
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { DC, defineCE, getCE } from '.././microcomponents.js';
|
|
2
|
-
import { Greatgrandchild } from './greatgrandchild.js';
|
|
3
|
-
defineCE('test-grandchild', class TestGrandchild extends DC {
|
|
4
|
-
constructor(target) {
|
|
5
|
-
super(target);
|
|
6
|
-
}
|
|
7
|
-
onConnected() {
|
|
8
|
-
let that = this;
|
|
9
|
-
for (let x = 0; x < 2; x++) {
|
|
10
|
-
that.target.append(new Greatgrandchild());
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
export const Grandchild = getCE('test-grandchild');
|
|
15
|
-
//# sourceMappingURL=grandchild.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"grandchild.js","sourceRoot":"","sources":["../../src/test/grandchild.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,QAAQ,CACP,iBAAiB,EAEjB,MAAM,cAAe,SAAQ,EAAE;IAC9B,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,eAAgB,EAAE,CAAC,CAAC;QAC5C,CAAC;IACF,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC,CAAC"}
|
|
@@ -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.grandparent=e():t.grandparent=e()}(self,(()=>(()=>{"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,{GrandParent:()=>N});var n=new Function("try {return this===window;}catch(e){ return false;}");let r=new Set;n()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>r.add(t)));class o{#t;#e=!1;#n=!1;constructor(t,e={},n="l"){this.#t=t,this.data=e,this.bubble=n}get type(){return this.#t}get stopped(){return this.#e}get immediateStopped(){return this.#n}stopPropagation(){this.#e=!0}stopImmediatePropagation(){this.stopPropagation(),this.#n=!0}}var s=new Function("try {return this===window;}catch(e){ return false;}");let c=new Set;function a(t,e){let n=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const r=t?._mc;!e&&r?n=n.concat(Object.values(t._mc)):e&&r&&r[e]&&n.push(r[e])}})),n}function i(t,e,n=!0){let r=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&r.push(t._mc[e]):r=r.concat(Object.values(t._mc)),n))return r;t=t.parentNode}return r}function l(t){return t&&t instanceof HTMLElement}function u(t,e,n,r=!1,o=!1){let s={once:!1};r&&(s.capture=r),o&&(s.once=o),t.addEventListener(e,n,s)}function d(t,e,n={}){let r=t;if(!r._mc){let e=h?.debug;h.debug=!1,r._mc=new h(t),h.debug=e,delete r._mc._mc}const o=r._mc;return e.length&&!o[e]&&(o[e]=n,t instanceof HTMLElement&&!t.getAttribute("_mc")&&t.setAttribute("_mc","")),n}function m(t,e){if(!e)return;const n=t?._mc||{};n&&n[e]&&delete n[e],!Object.keys(n).length&&t instanceof HTMLElement&&t.hasAttribute("_mc")&&t.removeAttribute("_mc")}function p(t,e,n={},r="l"){let s=t?._mc;if(!s)return;let c=e instanceof o?new o(e.type,e.data,"l"):new o(e,n,"l"),a="string"!=typeof e?e:new o(e,n,r);[...Object.values(s)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(c)})),/[ud]/.test(a.bubble)&&g(t,a)}function g(t,e){/[ud]/.test(e.bubble)&&setTimeout((()=>{if(-1===e.bubble.indexOf("l")&&(e.bubble+="l"),e.bubble.indexOf("u")>-1){let n=i(t,"",!0)?.[0].target;n&&h.trigger(n,e)}e.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&h.trigger(t,e)}))}),0)}s()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>c.add(t)));class f{#r;constructor(t,e=!1){var n;this.#r=new WeakRef(t||{}),(n=this).constructor!==h&&setTimeout((()=>{n.trigger("Init")}),0),function(t){if(!s()||t.constructor===h)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((r=>{let o=/^one/.test(r),s=r.replace(/^on[e]{0,1}/,""),a=s.toLowerCase();o&&Object.defineProperty(t,"on"+s,{configurable:!0,enumerable:!1,writable:!0,value:t=>{n.constructor.prototype[r].bind(n)(t)}}),c.has("on"+a)&&u(e,a,(t=>{n.trigger(s,t)}),!1,o)}))}}(this)}get target(){return this.#r.deref()}}class b extends f{_mc={};constructor(t){super(t)}static trigger=p;trigger(t,e={},n="l"){let r=this;if(r.constructor===b||r.constructor===h){let s=t instanceof o?new o(t.type,t.data,"l"):new o(t,e,"l"),c="string"!=typeof t?t:new o(t,e,n);return[...Object.getOwnPropertyNames(r)].forEach((t=>{r[t]?.trigger&&"function"==typeof r[t]?.trigger&&r[t]?.trigger(s)})),void(/[ud]/.test(c.bubble)&&g(r.target,c))}if(r instanceof b||r instanceof h){const r=this,s="string"!=typeof t?t:new o(t,e,n),c="on"+s.type[0].toUpperCase()+s.type.slice(1);if(s.bubble.indexOf("l")>-1&&(s.immediateStopped||"function"!=typeof r[c]||(r[c](s),r.hasOwnProperty(c)&&delete r[c])),s.stopped||"l"===s.bubble)return r;/[ud]/.test(s.bubble)&&g(r.target,s)}}}class h extends f{_mc={};constructor(t,e=!1){super(t)}static add=d;static remove=m;static trigger=p;trigger(t,e={},n){b.prototype.trigger.call(this,t,e,n)}parent(t=""){let e=this.target;return l(e)?i(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return l(e)?i(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!l(e))return[];const n=Math.random().toString().replace(".",""),r='[_mc]:not([temp_id="'+n+'"] [_mc] [_mc])';e.setAttribute("temp_id",n);const o=a([...e.querySelectorAll(r)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return l(e)?a([...e.querySelectorAll("*[_mc]")],t):[]}}const y=new Map,w=new Map;function _(t){const e="./"+t.split("-").join("/")+".js",n=document.createElement("script");return n.setAttribute("src",e),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("name",t),n.setAttribute("loading",""),u(n,"load",(t=>{n.removeAttribute("loading"),n.setAttribute("loaded","")})),u(n,"error",(t=>{console.error("could not load Custom Element code from",e)})),n}function A(){[...document.querySelectorAll(":not(:defined)")].filter((t=>!!t&&!customElements.get(t.tagName.toLowerCase())&&!y.has(t.tagName.toLowerCase()))).forEach((t=>{const e=t.tagName.toLowerCase(),n=(e.split("-").join("/"),_(e));u(n,"load",(()=>{y.set(e,customElements.get(t.tagName.toLowerCase()))})),y.set(e,"loading"),document.head.append(n)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((t=>!!t)).forEach((t=>{const e=t.getAttribute("_mc")?.split(" ").filter((t=>!!t))||[],n=e.filter((t=>!w.has(t)));n?.forEach((t=>{const e=_(t);u(e,"load",(()=>{return e=document.head.querySelector(`script[name="${t}"]`),void setTimeout((function(){const t=e.getAttribute("src"),n=e.getAttribute("name"),r=document.createElement("script");r.async=!0,r.setAttribute("type","module");const o=`\nimport _ from "${t}";\nimport {DC} from "./microcomponents.js";\n\nconst elements = Array.from(document.querySelectorAll('[_mc*="${n}"]')).filter( element => element instanceof HTMLElement );\n\nelements.forEach((element) => {\n\tautoload.state.MCs.set( '${n}', _ ); // add class to MCs repository\n\tDC.add(element, _.name, new _(element)); // add instance to DOM\n\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${n}', '').replace( /ww/g, ' ').trim()); // remove name from elements "_mc" attribute\n});\n\nsetTimeout( () => {\n\tdocument.body.querySelector('script[name="${n}]"')?.remove();\n},0);`;r.innerHTML=o,document.body.append(r)}),0);var e})),w.set(t,"loading"),document.head.append(e)}));const r=e.filter((t=>w.has(t)&&!w.get(t).length));r?.forEach((e=>{setTimeout((()=>{console.log("attaching",e,v.state.MCs.get(e)),h.add(t,e,new(v.state.MCs.get(e))(t)),t.setAttribute("_mc",t.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim())}),5)}))}))}let E=!1,C=null;function v(t=!0){return t?(E=t,C=new MutationObserver(A),setTimeout((()=>{C.observe(document.body,{childList:!0,subtree:!0}),A()}),5),E):(C?.disconnect(),C=null,E)}v.state={CEs:y,MCs:w};class O extends HTMLElement{constructor(){super()}connectedCallback(){h.trigger(this,"Connected")}disconnectedCallback(){h.trigger(this,"Disconnected")}adoptedCallback(){h.trigger(this,"Adopted")}attributeChangedCallback(t,e,n){h.trigger(this,"AttributeChanged",{name:t,oldValue:e,newValue:n})}}function M(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("");customElements.define(t,function(t,e){return Object.defineProperty(e,"name",{value:t})}(r,class extends O{instance;constructor(t){super();let n=new e(this,t);h.add(this,r,n)}static get observedAttributes(){return n}}))}function S(t){return customElements.get(t)}function j(t,e){return Math.floor(Math.random()*(e-t+1)+t)}M("test-greatgrandchild",class extends h{constructor(t){super(t)}onConnected(){this.updateStyle()}updateStyle(){this.target.setAttribute("style","border-color:rgb("+j(0,255)+","+j(0,255)+","+j(0,255)+")")}});const T=S("test-greatgrandchild");M("test-grandchild",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<2;e++)t.target.append(new T)}});const x=S("test-grandchild");M("test-child",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<10;e++)t.target.append(new x)}});const L=S("test-child");M("test-parent",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new L)}});const P=S("test-parent");M("test-grandparent",class extends h{constructor(t){super(t)}onConnected(){let t=this;for(let e=0;e<5;e++)t.target.append(new P)}});const N=S("test-grandparent");return e})()));
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"grandparent.js","sourceRoot":"","sources":["../../src/test/grandparent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,QAAQ,CACP,kBAAkB,EAElB,MAAM,eAAgB,SAAQ,EAAE;IAC/B,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,MAAO,EAAE,CAAC,CAAC;QACnC,CAAC;IACF,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAG,KAAK,CAAC,kBAAkB,CAAC,CAAC"}
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
import { DC, defineCE, getCE } from '.././microcomponents.js';
|
|
2
|
-
function random(min, max) {
|
|
3
|
-
var random = Math.floor(Math.random() * (max - min + 1) + min);
|
|
4
|
-
return random;
|
|
5
|
-
}
|
|
6
|
-
defineCE('test-greatgrandchild', class TestGreatgrandchild extends DC {
|
|
7
|
-
constructor(target) {
|
|
8
|
-
super(target);
|
|
9
|
-
}
|
|
10
|
-
onConnected() {
|
|
11
|
-
let that = this;
|
|
12
|
-
that.updateStyle();
|
|
13
|
-
}
|
|
14
|
-
updateStyle() {
|
|
15
|
-
var that = this;
|
|
16
|
-
function randomBorderColor() {
|
|
17
|
-
return ('rgb(' +
|
|
18
|
-
random(0, 255) +
|
|
19
|
-
',' +
|
|
20
|
-
random(0, 255) +
|
|
21
|
-
',' +
|
|
22
|
-
random(0, 255) +
|
|
23
|
-
')');
|
|
24
|
-
}
|
|
25
|
-
that.target.setAttribute('style', 'border-color:' + randomBorderColor());
|
|
26
|
-
}
|
|
27
|
-
});
|
|
28
|
-
export const Greatgrandchild = getCE('test-greatgrandchild');
|
|
29
|
-
//# sourceMappingURL=greatgrandchild.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"greatgrandchild.js","sourceRoot":"","sources":["../../src/test/greatgrandchild.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAE9D,SAAS,MAAM,CAAC,GAAW,EAAE,GAAW;IACvC,IAAI,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,GAAG,GAAG,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC;IAC/D,OAAO,MAAM,CAAC;AACf,CAAC;AAED,QAAQ,CACP,sBAAsB,EAEtB,MAAM,mBAAoB,SAAQ,EAAE;IACnC,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,IAAI,CAAC,WAAW,EAAE,CAAC;IACpB,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,SAAS,iBAAiB;YACzB,OAAO,CACN,MAAM;gBACN,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;gBACd,GAAG;gBACH,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;gBACd,GAAG;gBACH,MAAM,CAAC,CAAC,EAAE,GAAG,CAAC;gBACd,GAAG,CACH,CAAC;QACH,CAAC;QAED,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,EAAE,eAAe,GAAG,iBAAiB,EAAE,CAAC,CAAC;IAC1E,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG,KAAK,CAAC,sBAAsB,CAAC,CAAC"}
|
package/public/test/parent.js
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { DC, defineCE, getCE } from '.././microcomponents.js';
|
|
2
|
-
import { Child } from './child.js';
|
|
3
|
-
defineCE('test-parent', class Parent extends DC {
|
|
4
|
-
constructor(target) {
|
|
5
|
-
super(target);
|
|
6
|
-
}
|
|
7
|
-
onConnected() {
|
|
8
|
-
let that = this;
|
|
9
|
-
for (let x = 0; x < 5; x++) {
|
|
10
|
-
that.target.append(new Child());
|
|
11
|
-
}
|
|
12
|
-
}
|
|
13
|
-
});
|
|
14
|
-
export const Parent = getCE('test-parent');
|
|
15
|
-
//# sourceMappingURL=parent.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"parent.js","sourceRoot":"","sources":["../../src/test/parent.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAC9D,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,QAAQ,CACP,aAAa,EAEb,MAAM,MAAO,SAAQ,EAAE;IACtB,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;IACf,CAAC;IAED,WAAW;QACV,IAAI,IAAI,GAAG,IAAI,CAAC;QAEhB,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC;YAC5B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,IAAI,KAAM,EAAE,CAAC,CAAC;QAClC,CAAC;IACF,CAAC;CACD,CACD,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAAG,KAAK,CAAC,aAAa,CAAC,CAAC"}
|
package/public/test/testform.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.TestTestform=t():e.TestTestform=t()}(self,(()=>(()=>{"use strict";var e=new Function("try {return this===window;}catch(e){ return false;}");let t=new Set;e()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>t.add(e)));class n{#e;#t=!1;#n=!1;constructor(e,t={},n="l"){this.#e=e,this.data=t,this.bubble=n}get type(){return this.#e}get stopped(){return this.#t}get immediateStopped(){return this.#n}stopPropagation(){this.#t=!0}stopImmediatePropagation(){this.stopPropagation(),this.#n=!0}}var r=new Function("try {return this===window;}catch(e){ return false;}");let a=new Set;function l(e,t){let n=[];return e.forEach((e=>{if(e&&e instanceof HTMLElement){const r=e?._mc;!t&&r?n=n.concat(Object.values(e._mc)):t&&r&&r[t]&&n.push(r[t])}})),n}function o(e,t,n=!0){let r=[];for(;e;){if(e._mc&&(t?t&&e._mc[t]&&r.push(e._mc[t]):r=r.concat(Object.values(e._mc)),n))return r;e=e.parentNode}return r}function s(e){return e&&e instanceof HTMLElement}function i(e,t,n,r=!1,a=!1){let l={once:!1};r&&(l.capture=r),a&&(l.once=a),e.addEventListener(t,n,l)}function c(e,t,n={}){let r=e;if(!r._mc){let t=f?.debug;f.debug=!1,r._mc=new f(e),f.debug=t,delete r._mc._mc}const a=r._mc;return t.length&&!a[t]&&(a[t]=n,e instanceof HTMLElement&&!e.getAttribute("_mc")&&e.setAttribute("_mc","")),n}function u(e,t){if(!t)return;const n=e?._mc||{};n&&n[t]&&delete n[t],!Object.keys(n).length&&e instanceof HTMLElement&&e.hasAttribute("_mc")&&e.removeAttribute("_mc")}function p(e,t,r={},a="l"){let l=e?._mc;if(!l)return;let o=t instanceof n?new n(t.type,t.data,"l"):new n(t,r,"l"),s="string"!=typeof t?t:new n(t,r,a);[...Object.values(l)].forEach((e=>{e?.trigger&&"function"==typeof e?.trigger&&e?.trigger(o)})),/[ud]/.test(s.bubble)&&d(e,s)}function d(e,t){/[ud]/.test(t.bubble)&&setTimeout((()=>{if(-1===t.bubble.indexOf("l")&&(t.bubble+="l"),t.bubble.indexOf("u")>-1){let n=o(e,"",!0)?.[0].target;n&&f.trigger(n,t)}t.bubble.indexOf("d")>-1&&new Set(e._mc.children().map((e=>e?.target))).forEach((e=>{e&&f.trigger(e,t)}))}),0)}r()&&Object.keys(HTMLElement.prototype).filter((e=>/^on/.test(e))).forEach((e=>a.add(e)));class m{#r;constructor(e,t=!1){var n;this.#r=new WeakRef(e||{}),(n=this).constructor!==f&&setTimeout((()=>{n.trigger("Init")}),0),function(e){if(!r()||e.constructor===f)return;const t=e.target;if(t instanceof HTMLElement){let n=e;Object.getOwnPropertyNames(n.constructor.prototype).filter((e=>/^on[A-Z]|one[A-Z]/.test(e)&&"function"==typeof n.constructor.prototype[e])).forEach((r=>{let l=/^one/.test(r),o=r.replace(/^on[e]{0,1}/,""),s=o.toLowerCase();l&&Object.defineProperty(e,"on"+o,{configurable:!0,enumerable:!1,writable:!0,value:e=>{n.constructor.prototype[r].bind(n)(e)}}),a.has("on"+s)&&i(t,s,(e=>{n.trigger(o,e)}),!1,l)}))}}(this)}get target(){return this.#r.deref()}}class b extends m{_mc={};constructor(e){super(e)}static trigger=p;trigger(e,t={},r="l"){let a=this;if(a.constructor===b||a.constructor===f){let l=e instanceof n?new n(e.type,e.data,"l"):new n(e,t,"l"),o="string"!=typeof e?e:new n(e,t,r);return[...Object.getOwnPropertyNames(a)].forEach((e=>{a[e]?.trigger&&"function"==typeof a[e]?.trigger&&a[e]?.trigger(l)})),void(/[ud]/.test(o.bubble)&&d(a.target,o))}if(a instanceof b||a instanceof f){const a=this,l="string"!=typeof e?e:new n(e,t,r),o="on"+l.type[0].toUpperCase()+l.type.slice(1);if(l.bubble.indexOf("l")>-1&&(l.immediateStopped||"function"!=typeof a[o]||(a[o](l),a.hasOwnProperty(o)&&delete a[o])),l.stopped||"l"===l.bubble)return a;/[ud]/.test(l.bubble)&&d(a.target,l)}}}class f extends m{_mc={};constructor(e,t=!1){super(e)}static add=c;static remove=u;static trigger=p;trigger(e,t={},n){b.prototype.trigger.call(this,e,t,n)}parent(e=""){let t=this.target;return s(t)?o(t.parentNode,e,!0):[]}ancestors(e=""){let t=this?.target;return s(t)?o(this.target.parentNode,e,!1):[]}children(e=""){let t=this?.target;if(!s(t))return[];const n=Math.random().toString().replace(".",""),r='[_mc]:not([temp_id="'+n+'"] [_mc] [_mc])';t.setAttribute("temp_id",n);const a=l([...t.querySelectorAll(r)],e);return t.removeAttribute("temp_id"),a}descendants(e=""){let t=this?.target;return s(t)?l([...t.querySelectorAll("*[_mc]")],e):[]}}const g=new Map,h=new Map;function y(e){const t="./"+e.split("-").join("/")+".js",n=document.createElement("script");return n.setAttribute("src",t),n.setAttribute("blocking","render"),n.async=!0,n.setAttribute("type","module"),n.setAttribute("name",e),n.setAttribute("loading",""),i(n,"load",(e=>{n.removeAttribute("loading"),n.setAttribute("loaded","")})),i(n,"error",(e=>{console.error("could not load Custom Element code from",t)})),n}function v(){[...document.querySelectorAll(":not(:defined)")].filter((e=>!!e&&!customElements.get(e.tagName.toLowerCase())&&!g.has(e.tagName.toLowerCase()))).forEach((e=>{const t=e.tagName.toLowerCase(),n=(t.split("-").join("/"),y(t));i(n,"load",(()=>{g.set(t,customElements.get(e.tagName.toLowerCase()))})),g.set(t,"loading"),document.head.append(n)})),[...document.querySelectorAll('[_mc]:not([_mc=""]')].filter((e=>!!e)).forEach((e=>{const t=e.getAttribute("_mc")?.split(" ").filter((e=>!!e))||[],n=t.filter((e=>!h.has(e)));n?.forEach((e=>{const t=y(e);i(t,"load",(()=>{return t=document.head.querySelector(`script[name="${e}"]`),void setTimeout((function(){const e=t.getAttribute("src"),n=t.getAttribute("name"),r=document.createElement("script");r.async=!0,r.setAttribute("type","module");const a=`\nimport _ from "${e}";\nimport {DC} from "./microcomponents.js";\n\nconst elements = Array.from(document.querySelectorAll('[_mc*="${n}"]')).filter( element => element instanceof HTMLElement );\n\nelements.forEach((element) => {\n\tautoload.state.MCs.set( '${n}', _ ); // add class to MCs repository\n\tDC.add(element, _.name, new _(element)); // add instance to DOM\n\telement.setAttribute('_mc', element.getAttribute('_mc').replace('${n}', '').replace( /ww/g, ' ').trim()); // remove name from elements "_mc" attribute\n});\n\nsetTimeout( () => {\n\tdocument.body.querySelector('script[name="${n}]"')?.remove();\n},0);`;r.innerHTML=a,document.body.append(r)}),0);var t})),h.set(e,"loading"),document.head.append(t)}));const r=t.filter((e=>h.has(e)&&!h.get(e).length));r?.forEach((t=>{setTimeout((()=>{console.log("attaching",t,E.state.MCs.get(t)),f.add(e,t,new(E.state.MCs.get(t))(e)),e.setAttribute("_mc",e.getAttribute("_mc").replace("${elementName}","").replace(/\w\w/g," ").trim())}),5)}))}))}let w=!1,O=null;function E(e=!0){return e?(w=e,O=new MutationObserver(v),setTimeout((()=>{O.observe(document.body,{childList:!0,subtree:!0}),v()}),5),w):(O?.disconnect(),O=null,w)}function A(e){let t={};return[...Object.keys(e)].sort().forEach((n=>{var r;(r=e[n])&&r.constructor&&r.constructor===Object?t[n]=A(e[n]):t[n]=e[n]})),t}function x(e,t=!0){let n={};return[...Object.getOwnPropertyNames(e)].forEach((t=>{if(e[t]&&e[t].constructor&&e[t].constructor===Object){const r=x(e[t],!1);for(const e in r)n[t+"."+e]=r[e]}else n[t]=e[t]})),t?A(n):n}function _(e,t){return JSON.stringify(x(e))===JSON.stringify(x(t))}function k(e,t){let n;return()=>{clearTimeout(n),n=setTimeout((function(){e(...arguments)}),t)}}function j(e,t){const n=Object.getOwnPropertyDescriptors(e);for(const[e,r]of Object.entries(n))("get"in r||"set"in r)&&Object.defineProperty(t,e,r)}E.state={CEs:g,MCs:h};class S extends HTMLElement{constructor(){super()}connectedCallback(){f.trigger(this,"Connected")}disconnectedCallback(){f.trigger(this,"Disconnected")}adoptedCallback(){f.trigger(this,"Adopted")}attributeChangedCallback(e,t,n){f.trigger(this,"AttributeChanged",{name:e,oldValue:t,newValue:n})}}function C(e){return null!=e&&"object"==typeof e}function T(e){let t=new Set,n=/\{[^\{\}]*\}/g;return e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(n))).forEach((r=>{new Set(e.getAttribute(r)?.match(n)).forEach((e=>t.add(e.replace(/[\{\}]/g,""))))})),[...e.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(n))).forEach((e=>{(e.nodeValue||"").match(n).forEach((e=>{t.add(e.replace(/[\{\}]/g,""))}))})),[...t].map((e=>e.replace(/[\{\}]/g,"")))}const N=[HTMLInputElement,HTMLSelectElement,HTMLTextAreaElement];class L extends f{data={};oldDisplay="";constructor(e){super(e);let t=this;T(e).forEach((e=>t.data[e]="")),M(t),t.#a(),delete t._mc}#a(){let e=this,t=e.target,n=!1;t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(/\{[^\{\}]*\}/g))).forEach((n=>{let r=new Set(t.getAttribute(n)?.match(/\{[^\{\}]*\}/g));var a;e.data.observe((a=t.getAttribute(n),e=>{let l=a;r.forEach((t=>{l=l.replace(t,e[t.replace(/[\{\}]/g,"")])})),t.setAttribute(n,l)}))})),[...t.childNodes].filter((e=>3===e.nodeType&&(e.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((r=>{n=!0;let a=new Set(r.nodeValue.match(/\{[^\{\}]*\}/g));var l;e.data.observe((l=r.nodeValue,n=>{let o=l;a.forEach((e=>{o=o.replace(e,n[e.replace(/[\{\}]/g,"")])})),Object.keys(n).some((e=>!!n[e]))&&(e.oldDisplay?t.style=e.oldDisplay:t.removeAttribute("style"),delete e.oldDisplay),r.nodeValue=o})),e.oldDisplay=t.getAttribute("style)")||"",n&&!N.includes(t.constructor)&&"FIELDSET"!==t.tagName&&(t.style.display="none")}))}onData(e){let t=this,n={};Object.keys(e.data).forEach((r=>{t.data.hasOwnProperty(r)&&(n[r]=e.data[r])})),JSON.stringify(n)!==JSON.stringify(t.data)&&Object.assign(t.data,n)}}const M=(e,t)=>((t?[t]:[...Object.getOwnPropertyNames(e)]).forEach((t=>{if("_"===t[0]||void 0===e?.[t])return e;let n,r=e[t];if(!r.prototype)switch(typeof r){case"string":n=String;break;case"number":n=Number;break;case"boolean":n=Boolean;break;case"object":n=r instanceof Array?Array:Object;break;default:return}let a=class extends n{#l=!0;constructor(e){super(e),this.constructor.callbacks=[],C(e)&&Object.getOwnPropertyNames(e).forEach((t=>{this[t]=e[t]}))}observe(e){return this.constructor.callbacks.push(e),this}bind(e){const t=this;if(C(t.valueOf())){!function(e){var t;(t=e,(t instanceof HTMLElement?[t]:[]).concat([...t.querySelectorAll("*")]).filter((e=>!!T(e).length)).filter((e=>"STYLE"!==e.tagName))).forEach((e=>{e?._mc?._placeholders||f.add(e,"_placeholders",new L(e))}))}(e);const n=[...e.querySelectorAll("[_mc]")].filter((e=>!!e?._mc?._placeholders)),r=function(e){let t=x(e);n.forEach((e=>{e&&e._mc.trigger("data",t)}))};t.constructor.callbacks.push(r),t.notify()}else console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof t.valueOf(),t);return this}notify(e){let t=this,n=C(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return void 0!==e&&(t.#l=e),t.constructor.callbacks.forEach((e=>{e(n)})),t}},l=new a(r);Object.defineProperty(e,t,{enumerable:!0,get(){if(C(l.valueOf())){let e=structuredClone(Object.assign({},l));setTimeout(k((function(){_(structuredClone(Object.assign({},l)),e)||l.notify()}),0),0)}return l},set(e){if(typeof e==typeof l.valueOf())if(C(l.valueOf())&&l.valueOf()instanceof Array==0){let t=structuredClone(Object.assign({},l));l instanceof a==0&&(l=new a(structuredClone(Object.assign({},e))),j(e,l),l.seal()),Object.assign(l,e),setTimeout(k((function(){_(structuredClone(Object.assign({},l)),t)||l.notify()}),0),0)}else{let t=l.valueOf(),n=l.constructor.callbacks;l=new a(e),l.constructor.callbacks=n,e!==t&&l.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof l.valueOf(),l,"- CANNOT BECOME:",typeof e)}}),e[t]=r})),e);class I{constructor(e){}}class D extends I{#o;constructor(e){super(e),this.#o=e}get val(){return new FormData(this.#o.form).get(this.#o.name)}set val(e){[...this.#o.form.querySelectorAll(`input[type="radio"][name="${this.#o.name}"]`)].filter((t=>t.getAttribute("value")===e)).shift().checked=!0}}class H extends I{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.checked}set val(e){this.#o.checked=e}}class P extends I{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value}set val(e){this.#o.value=e}}class q extends I{#o;#s=!1;constructor(e){super(e),this.#o=e,this.#s=e.multiple}get val(){const e=[];return[...this.#o.querySelectorAll("option")].filter((e=>e.selected)).forEach((t=>{e.push(t.value)})),this.#s?e:e.length?e[0]:""}set val(e){e="string"==typeof e?[e]:e,[...this.#o.querySelectorAll("option")].forEach((t=>{e.indexOf(t.value)>-1?t.selected=!0:t.selected=!1}))}}class $ extends I{#o;constructor(e){super(e),this.#o=e}get val(){return this.#o.value||""}set val(e){this.#o.value=e}}return function(e,t,n=[]){if(customElements.get(e))return void console.warn(`IGNORED: Custom element "${e}" is already defined!`);if(!e.includes("-"))throw new Error('createCustomElement: tagName must contain at least one hyphen ("-").');let r=e.split("-").map((e=>e.charAt(0).toUpperCase()+e.slice(1))).join("");customElements.define(e,function(e,t){return Object.defineProperty(t,"name",{value:e})}(r,class extends S{instance;constructor(e){super();let n=new t(this,e);f.add(this,r,n)}static get observedAttributes(){return n}}))}("test-testform",class extends f{data;constructor(e){super(e);const t=this;delete t._mc;let n=t.target.attachShadow({mode:"open"});n.innerHTML=`<style>${t.css}</style>${t.template}`,function(e,t,n){let r=(e=>{let t=[...(e||document).querySelectorAll("input,select,textarea")],n={};return t.forEach((e=>{const t=e.getAttribute("name");if(t){let r=!1;switch((e=>e.tagName.toLowerCase())(e)){case"input":switch(e.type){case"radio":r=new D(e);break;case"checkbox":r=new H(e);break;default:r=new P(e)}break;case"select":r=new q(e);break;case"textarea":r=new $(e);break;default:console.warn("handler missing:",t,"for",e.tagName.toLowerCase(),e)}r&&(f.add(e,t,r),Object.defineProperty(n,t,{enumerable:!0,configurable:!0,get:()=>r.val,set:e=>{r.val!==e&&(r.val=e)}}))}})),n})(n);e[t]=Object.assign({},r),M(e,t),j(r,e[t]),[...n.querySelectorAll("input, textarea, select")].forEach((n=>{i(n,"keyup",(n=>{e[t].notify()})),i(n,"change",(n=>{e[t].notify()})),i(n,"select",(n=>{e[t].notify()}))}))}(t,"data",n),t.data.bind(n)}get template(){return'\n <form>\n \x3c!-- sample form to start with --\x3e\n <fieldset>\n <legend>Inputs</legend>\n <label>text</label><input type="text" name="textInput" value="Hallo" /> <strong>2wB: </strong>{textInput}\n <label>color</label><input type="color" name="colorInput" value="" />\n <label>date</label><input type="date" name="dateInput" value="" />\n <label>datetime-local</label><input type="datetime-local" name="dtlInput" value="" />\n <label>email</label><input type="email" name="email" value="" />\n <label>file</label><input type="file" name="fileInput" value="" />\n <label>hidden</label><input type="hidden" name="hiddenInput" value="hiddenVal" />\n <label>month</label><input type="month" name="month" value="" />\n <label>number</label><input type="number" name="number" value="" />\n <label>password</label><input type="password" name="passInput" value="" />\n <label>range</label><input type="range" name="rangeInput" value="" />\n <label>search</label><input type="search" name="searchInput" value="" />\n <label>tel</label><input type="tel" name="telInput" value="" />\n <label>time</label><input type="time" name="timeInput" value="" />\n <label>url</label><input type="url" name="urlInput" value="" />\n <label>week</label><input type="week" name="weekInput" value="" />\n </fieldset>\n\n <fieldset>\n <legend>Selects</legend>\n\n <label>singleSelect</label>\n <select name="singleSelect">\n <option disabled selected value> -- select -- </option>\n <option value="1">Option 1</option>\n <option value="2">Option 2</option>\n <option value="3">Option 3</option>\n <option value="4">Option 4</option>\n </select>\n\n <label>multiSelect</label>\n <select name="multiSelect" multiple="multiple" type="select-multiple">\n <option value="1">Option 1</option>\n <option value="2" selected=true>Option 2</option>\n <option value="3">Option 3</option>\n <option value="4" selected=true>Option 4</option>\n </select>\n\n </fieldset>\n\n <fieldset>\n <legend>Radiobuttons <strong>2wB: </strong><span>{myRadio}</span></legend>\n\n <label>radio1</label><input type="radio" name="myRadio" value="radio1">\n <label>radio2</label><input type="radio" name="myRadio" value="radio2">\n <label>radio3</label><input type="radio" name="myRadio" value="radio3">\n\n </fieldset>\n\n <fieldset>\n <legend>Checkboxes</legend>\n <label>cb1</label><input type="checkbox" name="cb1">\n <label>cb2</label><input type="checkbox" name="cb2">\n <label>cb3</label><input type="checkbox" name="cb3">\n <label>cb4</label><input type="checkbox" name="cb4">\n <label>cb5</label><input type="checkbox" name="cb5">\n\n </fieldset>\n\n <fieldset>\n <legend>TextArea</legend>\n <label>textArea</label>\n <textarea name="textArea">abc</textarea>\n </fieldset>\n\n </form>\n '}get css(){return"\nlegend {\n display: inherit;\n margin: inherit;\n vertical-align: inherit;\n}\n\nlabel {\n display: inline;\n margin-top: 5px;\n margin-left: 5px;\n vertical-align: top;\n width: 10em;\n text-align: right;\n}\n\nlabel::before {\n content: ' ';\n display: block;\n}\n\nform input,\nform select,\nform textarea {\n margin-left: 5px;\n margin-top: 0px;\n display: inline;\n}\n\nform label + textarea {\n display: inline-block;\n margin-top: 3px;\n}\n\nform input + label {\n width: inherit;\n margin-top: 3px;\n text-align: left;\n}\n\nbody > form {\n display: block;\n}\n\nform fieldset {\n border: 1px solid darkslategrey;\n border-radius: 3px;\n margin: 0.5em 0;\n}\n "}}),{}})()));
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"testform.js","sourceRoot":"","sources":["../../src/test/testform.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AACb,OAAO,EAAE,EAAE,EAAE,QAAQ,EAAc,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE/E,QAAQ,CACP,eAAe,EAEf,MAAM,YAAa,SAAQ,EAAE;IAC5B,IAAI,CAAU;IAEd,YAAY,MAAmB;QAC9B,KAAK,CAAC,MAAM,CAAC,CAAC;QAEd,MAAM,IAAI,GAAG,IAAI,CAAC;QAElB,OAAO,IAAI,CAAC,GAAG,CAAC;QAEhB,IAAI,MAAM,GAAI,IAAW,CAAC,MAAM,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;QAChE,MAAM,CAAC,SAAS,GAAG,UAAU,IAAI,CAAC,GAAG,WAAW,IAAI,CAAC,QAAQ,EAAE,CAAC;QAEhE,UAAU,CAAC,IAAI,EAAE,MAAM,EAAE,MAAM,CAAC,CAAC;QAEhC,IAAI,CAAC,IAAmB,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACxC,CAAC;IAED,IAAI,QAAQ;QACX,OAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAuEN,CAAC;IACZ,CAAC;IAED,IAAI,GAAG;QACN,OAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;aAiDL,CAAC;IACZ,CAAC;CACD,CACD,CAAC"}
|
package/public/test/testmc.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"testmc.js","sourceRoot":"","sources":["../../src/test/testmc.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAe,MAAM,uBAAuB,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,EAAE;IAClC,YAAY,MAAmB;QAC3B,KAAK,CAAC,MAAM,CAAC,CAAC;QACd,OAAO,IAAI,CAAC,GAAG,CAAC;IACpB,CAAC;IAED,OAAO;IAEP,CAAC;CACJ"}
|
package/public/test.html
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>Micro Components Manual Test</title>
|
|
7
|
-
<link
|
|
8
|
-
rel="icon"
|
|
9
|
-
type="image/svg+xml"
|
|
10
|
-
sizes="any"
|
|
11
|
-
href="MicroComponents.svg"
|
|
12
|
-
/>
|
|
13
|
-
<link href="./my-tag.css" rel="stylesheet" />
|
|
14
|
-
<link href="./grandparent.css" rel="stylesheet" />
|
|
15
|
-
<script src="./microcomponents.min.js"></script>
|
|
16
|
-
<script>
|
|
17
|
-
Object.assign(window, microcomponents); // make system global, for debugging
|
|
18
|
-
autoload(true); // automatically load web components that are undefined
|
|
19
|
-
</script>
|
|
20
|
-
<script type="module" src="./test.js"></script>
|
|
21
|
-
</head>
|
|
22
|
-
<body>
|
|
23
|
-
<test-grandparent></test-grandparent>
|
|
24
|
-
<test-testform _mc="test-testmc"></test-testform>
|
|
25
|
-
Open the debugger, read console, then:<br />
|
|
26
|
-
</body>
|
|
27
|
-
</html>
|
|
File without changes
|