@twobirds/microcomponents 0.0.37 → 0.0.41
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/my-tag.css +10 -2
- package/assets/test.html +21 -12
- package/dist/MC.d.ts +1 -1
- package/dist/MC.d.ts.map +1 -1
- package/dist/MC.min.js +49 -28
- package/dist/MC.ts +69 -32
- package/dist/elements.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 +21 -14
- package/dist/test.ts +25 -17
- package/package.json +1 -1
- package/public/MC.js +49 -28
- package/public/MC.js.map +1 -1
- package/public/MC.min.js +49 -28
- package/public/assets/search.js +1 -1
- package/public/classes/MC.DC.html +13 -13
- package/public/classes/MC.MC.html +14 -12
- package/public/classes/MC.McBase.html +4 -4
- package/public/classes/MC.McEvent.html +13 -13
- package/public/elements.min.js +1 -1
- package/public/functions/MC.addListener.html +1 -1
- package/public/functions/MC.removeListener.html +1 -1
- package/public/functions/elements.defineCE.html +1 -1
- package/public/functions/elements.getCE.html +1 -1
- package/public/functions/formValues.formValues.html +1 -1
- package/public/functions/observables.observe.html +1 -1
- package/public/functions/selectors._d.html +1 -1
- package/public/functions/selectors._t.html +1 -1
- package/public/interfaces/MC.HTMLMcElement.html +2 -2
- package/public/interfaces/selectors.DSelector.html +55 -55
- package/public/interfaces/selectors.TSelector.html +37 -37
- package/public/microcomponents.min.js +1 -1
- package/public/modules/MC.html +1 -1
- package/public/modules/elements.html +1 -1
- package/public/modules/formValues.html +1 -1
- package/public/modules/observables.html +1 -1
- package/public/modules/selectors.html +1 -1
- package/public/my-tag.css +10 -2
- package/public/observables.js +20 -9
- package/public/observables.js.map +1 -1
- package/public/observables.min.js +1 -1
- package/public/src/MC.ts +69 -32
- package/public/src/observables.ts +21 -14
- package/public/src/test.ts +25 -17
- package/public/test.html +21 -12
- package/public/test.js +18 -25
- package/public/test.js.map +1 -1
- package/public/types/observables.Observable.html +5 -5
- package/public/types/selectors.selection.html +1 -1
- package/public/types/selectors.singleSelector.html +1 -1
- package/src/MC.ts +69 -32
- package/src/observables.ts +21 -14
- package/src/test.ts +25 -17
package/public/my-tag.css
CHANGED
|
@@ -1,10 +1,18 @@
|
|
|
1
|
-
my-tag {
|
|
1
|
+
my-tag > button {
|
|
2
2
|
border: 2px solid gray;
|
|
3
3
|
margin: 3px;
|
|
4
4
|
padding: 2px 5px;
|
|
5
5
|
display: inline-block;
|
|
6
6
|
}
|
|
7
7
|
|
|
8
|
-
my-tag
|
|
8
|
+
my-tag.clicked > button {
|
|
9
|
+
border-color: blue;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
my-tag.overClicked > button {
|
|
13
|
+
border-color: orange;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
my-tag > button:hover {
|
|
9
17
|
border-color: red;
|
|
10
18
|
}
|
package/public/observables.js
CHANGED
|
@@ -5,13 +5,13 @@ function isObservableObject(value) {
|
|
|
5
5
|
return value != null && typeof value === 'object';
|
|
6
6
|
}
|
|
7
7
|
function getPlaceholders(target) {
|
|
8
|
-
let placeholders = new Set();
|
|
8
|
+
let placeholders = new Set(), regEx = /\{[^\{\}]*\}/g;
|
|
9
9
|
// scan attributes
|
|
10
10
|
target
|
|
11
11
|
.getAttributeNames()
|
|
12
|
-
.filter((attr) => target.getAttribute(attr)?.match(
|
|
12
|
+
.filter((attr) => target.getAttribute(attr)?.match(regEx)) // extract placeholder(s)
|
|
13
13
|
.forEach((attr) => {
|
|
14
|
-
let phs = new Set(target.getAttribute(attr)?.match(
|
|
14
|
+
let phs = new Set(target.getAttribute(attr)?.match(regEx));
|
|
15
15
|
phs.forEach((placeholder) => placeholders.add(placeholder.replace(/[\{\}]/g, '')));
|
|
16
16
|
});
|
|
17
17
|
// scan children text nodes
|
|
@@ -20,11 +20,11 @@ function getPlaceholders(target) {
|
|
|
20
20
|
return (
|
|
21
21
|
// is text node and has placeholders
|
|
22
22
|
childNode.nodeType === 3 &&
|
|
23
|
-
(childNode.nodeValue || '').match(
|
|
23
|
+
(childNode.nodeValue || '').match(regEx));
|
|
24
24
|
})
|
|
25
25
|
.forEach((childNode) => {
|
|
26
26
|
(childNode.nodeValue || '')
|
|
27
|
-
.match(
|
|
27
|
+
.match(regEx)
|
|
28
28
|
.forEach((placeholder) => {
|
|
29
29
|
placeholders.add(placeholder.replace(/[\{\}]/g, ''));
|
|
30
30
|
});
|
|
@@ -96,13 +96,17 @@ class Placeholders extends DC {
|
|
|
96
96
|
}
|
|
97
97
|
}
|
|
98
98
|
function getPlaceholderElements(target) {
|
|
99
|
-
let elements = [target]
|
|
99
|
+
let elements = (target instanceof HTMLElement ? [target] : [])
|
|
100
100
|
.concat([...target.querySelectorAll('*')])
|
|
101
101
|
.filter((e) => !!getPlaceholders(e).length);
|
|
102
102
|
return elements;
|
|
103
103
|
}
|
|
104
104
|
function makePlaceHolders(element) {
|
|
105
|
-
getPlaceholderElements(element).forEach((e) =>
|
|
105
|
+
getPlaceholderElements(element).forEach((e) => {
|
|
106
|
+
if (e?._mc?._placeholders)
|
|
107
|
+
return;
|
|
108
|
+
DC.add(e, '_placeholders', new Placeholders(e));
|
|
109
|
+
});
|
|
106
110
|
}
|
|
107
111
|
export const observe = (target, propertyName) => {
|
|
108
112
|
let keys = !propertyName
|
|
@@ -154,12 +158,19 @@ export const observe = (target, propertyName) => {
|
|
|
154
158
|
return this;
|
|
155
159
|
}
|
|
156
160
|
bind(target) {
|
|
157
|
-
const that = this, iso = isObservableObject(that.valueOf())
|
|
161
|
+
const that = this, iso = isObservableObject(that.valueOf());
|
|
158
162
|
//console.log('bind', iso, target);
|
|
159
163
|
if (iso) {
|
|
160
164
|
makePlaceHolders(target);
|
|
161
165
|
this.constructor.callbacks.push((data) => {
|
|
162
|
-
|
|
166
|
+
// avoid bubbling for speed
|
|
167
|
+
new DC(target)
|
|
168
|
+
.descendants('_placeholders')
|
|
169
|
+
.forEach((e) => {
|
|
170
|
+
if (!e)
|
|
171
|
+
return;
|
|
172
|
+
e.trigger('data', flattenObject(data));
|
|
173
|
+
});
|
|
163
174
|
});
|
|
164
175
|
that.notify();
|
|
165
176
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"observables.js","sourceRoot":"","sources":["../src/observables.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,EAGN,QAAQ,EACR,SAAS,EAET,aAAa,GACb,MAAM,cAAc,CAAC;AAEtB,OAAO,EAAE,EAAE,EAA0B,MAAM,SAAS,CAAC;AAErD,SAAS,kBAAkB,CAAC,KAAU;IACrC,OAAO,KAAK,IAAI,IAAI,IAAI,OAAO,KAAK,KAAK,QAAQ,CAAC;AACnD,CAAC;AAID,SAAS,eAAe,CAAC,MAAmB;IAC3C,IAAI,YAAY,GAAgB,IAAI,GAAG,EAAE,CAAC;
|
|
1
|
+
{"version":3,"file":"observables.js","sourceRoot":"","sources":["../src/observables.ts"],"names":[],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.observables=e():t.observables=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var
|
|
1
|
+
!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.observables=e():t.observables=e()}(this,(()=>(()=>{"use strict";var t={d:(e,r)=>{for(var n in r)t.o(r,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:r[n]})},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={};function r(t){let e={};return[...Object.keys(t)].sort().forEach((n=>{var o;(o=t[n])&&o.constructor&&o.constructor===Object?e[n]=r(t[n]):e[n]=t[n]})),e}function n(t,e=!0){let o={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=n(t[e],!1);for(const t in r)o[e+"."+t]=r[t]}else o[e]=t[e]})),e?r(o):o}function o(t,e){return JSON.stringify(n(t))===JSON.stringify(n(e))}function c(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}t.r(e),t.d(e,{observe:()=>_});var a=new Function("try {return this===window;}catch(e){ return false;}");let s=new Set;a()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>s.add(t)));class i{#t;#e=!1;#r=!1;constructor(t,e={},r="l"){this.#t=t,this.data=e,this.bubble=r}get type(){return this.#t}get stopped(){return this.#e}get immediateStopped(){return this.#r}stopPropagation(){this.#e=!0}stopImmediatePropagation(){this.stopPropagation(),this.#r=!0}}var l=new Function("try {return this===window;}catch(e){ return false;}");let u=new Set;function f(t,e){let r=[];return t.forEach((t=>{if(t&&t instanceof HTMLElement){const n=t?._mc;!e&&n?r=r.concat(Object.values(t._mc)):e&&n&&n[e]&&r.push(n[e])}})),r}function d(t,e,r=!0){let n=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&n.push(t._mc[e]):n=n.concat(Object.values(t._mc)),r))return n;t=t.parentNode}return n}function b(t){return t&&t instanceof HTMLElement}function p(t,e,r={}){let n=t;if(!n._mc){let e=v?.debug;v.debug=!1,n._mc=new v(t),v.debug=e,delete n._mc._mc}const o=n._mc;return e.length&&!o[e]&&(o[e]=r,t instanceof HTMLElement&&t.setAttribute("_mc","")),r}function g(t,e){if(!e)return;const r=t?._mc||{};r&&r[e]&&delete r[e],!Object.keys(r).length&&t instanceof HTMLElement&&t.hasAttribute("_mc")&&t.removeAttribute("_mc")}function h(t,e,r={},n="l"){let o=t?._mc;if(!o)return;let c=e instanceof i?new i(e.type,e.data,"l"):new i(e,r,"l"),a="string"!=typeof e?e:new i(e,r,n);[...Object.values(o)].forEach((t=>{t?.trigger&&"function"==typeof t?.trigger&&t?.trigger(c)})),/[ud]/.test(a.bubble)&&m(t,a)}function m(t,e){/[ud]/.test(e.bubble)&&setTimeout((()=>{if(-1===e.bubble.indexOf("l")&&(e.bubble+="l"),e.bubble.indexOf("u")>-1){let r=d(t,"",!0)?.[0].target;r&&v.trigger(r,e)}e.bubble.indexOf("d")>-1&&new Set(t._mc.children().map((t=>t?.target))).forEach((t=>{t&&v.trigger(t,e)}))}),0)}l()&&Object.keys(HTMLElement.prototype).filter((t=>/^on/.test(t))).forEach((t=>u.add(t)));class y{#n;constructor(t,e=!1){var r;this.#n=new WeakRef(t||{}),(r=this).constructor!==v&&setTimeout((()=>{r.trigger("Init")}),0),function(t){if(!l()||t.constructor===v)return;const e=t.target;if(e instanceof HTMLElement){let r=t;Object.getOwnPropertyNames(r.constructor.prototype).filter((t=>/^on[A-Z]|one[A-Z]/.test(t)&&"function"==typeof r.constructor.prototype[t])).forEach((n=>{let o=/^one/.test(n),c=n.replace(/^on[e]{0,1}/,""),a=c.toLowerCase();o&&Object.defineProperty(t,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:t=>{r.constructor.prototype[n].bind(r)(t)}}),u.has("on"+a)&&function(t,e,r,n=!1,o=!1){let c={once:!1};n&&(c.capture=n),o&&(c.once=o),t.addEventListener(e,r,c)}(e,a,(t=>{r.trigger(c,t)}),!1,o)}))}}(this)}get target(){return this.#n.deref()}}class O extends y{_mc={};constructor(t){super(t)}static trigger=h;trigger(t,e={},r="l"){let n=this;if(n.constructor===O||n.constructor===v){let o=t instanceof i?new i(t.type,t.data,"l"):new i(t,e,"l"),c="string"!=typeof t?t:new i(t,e,r);return[...Object.getOwnPropertyNames(n)].forEach((t=>{n[t]?.trigger&&"function"==typeof n[t]?.trigger&&n[t]?.trigger(o)})),void(/[ud]/.test(c.bubble)&&m(n.target,c))}if(n instanceof O||n instanceof v){const n=this,o="string"!=typeof t?t:new i(t,e,r),c="on"+o.type[0].toUpperCase()+o.type.slice(1);if(o.bubble.indexOf("l")>-1&&(o.immediateStopped||"function"!=typeof n[c]||(n[c](o),n.hasOwnProperty(c)&&delete n[c])),o.stopped||"l"===o.bubble)return n;/[ud]/.test(o.bubble)&&m(n.target,o)}}}class v extends y{_mc={};constructor(t,e=!1){super(t)}static add=p;static remove=g;static trigger=h;trigger(t,e={},r){O.prototype.trigger.call(this,t,e,r)}parent(t=""){let e=this.target;return b(e)?d(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return b(e)?d(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!b(e))return[];const r=Math.random().toString().replace(".",""),n='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';e.setAttribute("temp_id",r);const o=f([...e.querySelectorAll(n)],t);return e.removeAttribute("temp_id"),o}descendants(t=""){let e=this?.target;return b(e)?f([...e.querySelectorAll("*[_mc]")],t):[]}}function w(t){return null!=t&&"object"==typeof t}function E(t){let e=new Set,r=/\{[^\{\}]*\}/g;return t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(r))).forEach((n=>{new Set(t.getAttribute(n)?.match(r)).forEach((t=>e.add(t.replace(/[\{\}]/g,""))))})),[...t.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(r))).forEach((t=>{(t.nodeValue||"").match(r).forEach((t=>{e.add(t.replace(/[\{\}]/g,""))}))})),[...e].map((t=>t.replace(/[\{\}]/g,""))),[...e]}class j extends v{data={};placeholders=[];constructor(t){super(t);let e=this;E(t).forEach((t=>e.data[t]="")),_(e),e.#o()}#o(){let t=this,e=t.target;e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g))).forEach((r=>{let n=new Set(e.getAttribute(r)?.match(/\{[^\{\}]*\}/g));var o;t.data.observe((o=e.getAttribute(r),t=>{let c=o;n.forEach((e=>{c=c.replace(e,t[e.replace(/[\{\}]/g,"")])})),e.setAttribute(r,c)}))})),[...e.childNodes].filter((t=>3===t.nodeType&&(t.nodeValue||"").match(/\{[^\{\}]*\}/g))).forEach((e=>{let r=new Set(e.nodeValue.match(/\{[^\{\}]*\}/g));var n;t.data.observe((n=e.nodeValue,t=>{let o=n;r.forEach((e=>{o=o.replace(e,t[e.replace(/[\{\}]/g,"")])})),e.nodeValue=o}))}))}onData(t){let e=this,r={};Object.keys(t.data).forEach((n=>{e.data.hasOwnProperty(n)&&(r[n]=t.data[n])})),JSON.stringify(r)!==JSON.stringify(e.data)&&Object.assign(e.data,r)}}const _=(t,e)=>{(e?[e]:[...Object.getOwnPropertyNames(t)]).forEach((e=>{if("_"===e[0]||void 0===t?.[e])return;let r,a=t[e];if(!a.prototype)switch(typeof a){case"string":r=String;break;case"number":r=Number;break;case"boolean":r=Boolean;break;case"object":r=a instanceof Array?Array:Object;break;default:return}let s=class extends r{constructor(t){super(t),this.constructor.callbacks=[],w(t)&&(this.constructor.bound=[],Object.getOwnPropertyNames(t).forEach((e=>{this[e]=t[e]})))}observe(t){return this.constructor.callbacks.push(t),this}bind(t){const e=this;return w(e.valueOf())?(function(t){var e;(e=t,(e instanceof HTMLElement?[e]:[]).concat([...e.querySelectorAll("*")]).filter((t=>!!E(t).length))).forEach((t=>{t?._mc?._placeholders||v.add(t,"_placeholders",new j(t))}))}(t),this.constructor.callbacks.push((e=>{new v(t).descendants("_placeholders").forEach((t=>{t&&t.trigger("data",n(e))}))})),e.notify()):console.warn("IGNORED - cannot bind a non-Object to the dom, IS:",typeof e.valueOf(),e),this}notify(){let t=this,e=w(t.valueOf())&&t.valueOf()instanceof Array==0?structuredClone(Object.assign({},t)):t.valueOf();return t.constructor.callbacks.forEach((t=>{t(e)})),w(t.valueOf())&&t.constructor.bound.forEach((t=>{t(e)})),this}},i=new s(a);Object.defineProperty(t,e,{enumerable:!0,get(){if(w(i.valueOf())){let t=structuredClone(Object.assign({},i));setTimeout(c((function(){o(structuredClone(Object.assign({},i)),t)||i.notify()}),0),0)}return i},set(t){if(typeof t==typeof i.valueOf())if(w(i.valueOf())&&i.valueOf()instanceof Array==0){let e=structuredClone(Object.assign({},i));t=structuredClone(Object.assign({},t));let r=i.constructor?.hasFormHandler??!1,n=i.constructor.callbacks,a=i.constructor.bound;i=new s(structuredClone(Object.assign({},t))),i.constructor.callbacks=r,i.constructor.callbacks=n,i.constructor.bound=a,setTimeout(c((function(){o(structuredClone(Object.assign({},i)),e)||i.notify()}),0),0)}else{let e=i.valueOf(),r=i.constructor.callbacks;i=new s(t),i.constructor.callbacks=r,t!==e&&i.notify()}else console.warn("IGNORED - cannot change observable types, IS:",typeof i.valueOf(),i,"- CANNOT BECOME:",typeof t)}}),t[e]=a}))};return e})()));
|
package/public/src/MC.ts
CHANGED
|
@@ -141,15 +141,33 @@ function remove(target: HTMLMcElement, key: string) {
|
|
|
141
141
|
}
|
|
142
142
|
|
|
143
143
|
// trigger an event
|
|
144
|
-
function trigger(
|
|
144
|
+
function trigger(
|
|
145
|
+
target: HTMLElement,
|
|
146
|
+
ev: McEvent | string,
|
|
147
|
+
data: any = {},
|
|
148
|
+
bubble: string = 'l'
|
|
149
|
+
) {
|
|
145
150
|
let _mc = (target as any)?._mc;
|
|
146
151
|
if (!_mc) return;
|
|
152
|
+
|
|
153
|
+
let event =
|
|
154
|
+
ev instanceof McEvent
|
|
155
|
+
? new McEvent(ev.type, ev.data, 'l')
|
|
156
|
+
: new McEvent(ev, data, 'l'),
|
|
157
|
+
mcEvent: McEvent =
|
|
158
|
+
typeof ev !== 'string' ? (ev as McEvent) : new McEvent(ev, data, bubble);
|
|
159
|
+
|
|
147
160
|
[...Object.values(_mc)].forEach((mc: any) => {
|
|
148
161
|
//console.log( 'mc [', mc.constructor.name, ']', mc.constructor.prototype?.oneInit );
|
|
149
162
|
if ((mc as any)?.trigger && typeof (mc as any)?.trigger === 'function') {
|
|
150
|
-
(mc as any)?.trigger(
|
|
163
|
+
(mc as any)?.trigger(event);
|
|
151
164
|
}
|
|
152
165
|
});
|
|
166
|
+
|
|
167
|
+
if (/[ud]/.test(mcEvent.bubble)) {
|
|
168
|
+
bubbleEvent(target, mcEvent);
|
|
169
|
+
}
|
|
170
|
+
|
|
153
171
|
return;
|
|
154
172
|
}
|
|
155
173
|
|
|
@@ -217,6 +235,37 @@ function autoAttachListeners(element: MC | DC) {
|
|
|
217
235
|
}
|
|
218
236
|
}
|
|
219
237
|
|
|
238
|
+
function bubbleEvent(target: HTMLElement, ev: McEvent) {
|
|
239
|
+
// at this point, either 'u' or 'd' bubbling should be indicated
|
|
240
|
+
// mcEvent bubbling is asynchronous, and the order of target MC execution in case of multiple matches is not guaranteed!
|
|
241
|
+
if (/[ud]/.test(ev.bubble)) {
|
|
242
|
+
setTimeout(() => {
|
|
243
|
+
// bubbling must include 'l' for local, or else no handlers are executed'
|
|
244
|
+
if (ev.bubble.indexOf('l') === -1) {
|
|
245
|
+
ev.bubble += 'l';
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
// bubble up towards root
|
|
249
|
+
if (ev.bubble.indexOf('u') > -1) {
|
|
250
|
+
let parent = traverseNodes(target, '', true)?.[0].target;
|
|
251
|
+
if (parent) DC.trigger(parent, ev);
|
|
252
|
+
}
|
|
253
|
+
|
|
254
|
+
// bubble down
|
|
255
|
+
if (ev.bubble.indexOf('d') > -1) {
|
|
256
|
+
let targets = new Set<HTMLMcElement>(
|
|
257
|
+
(target as HTMLMcElement)._mc
|
|
258
|
+
.children()
|
|
259
|
+
.map((c: unknown) => (c as any)?.target)
|
|
260
|
+
);
|
|
261
|
+
targets.forEach((target: HTMLMcElement) => {
|
|
262
|
+
if (target) DC.trigger(target, ev);
|
|
263
|
+
});
|
|
264
|
+
}
|
|
265
|
+
}, 0);
|
|
266
|
+
}
|
|
267
|
+
}
|
|
268
|
+
|
|
220
269
|
class McBase {
|
|
221
270
|
#target: WeakRef<any>; // avoid circular reference
|
|
222
271
|
|
|
@@ -245,22 +294,34 @@ class MC extends McBase {
|
|
|
245
294
|
|
|
246
295
|
static trigger = trigger;
|
|
247
296
|
|
|
248
|
-
trigger(ev: McEvent | string, data: any = {}, bubble
|
|
297
|
+
trigger(ev: McEvent | string, data: any = {}, bubble: string = 'l') {
|
|
249
298
|
let that = this;
|
|
250
299
|
|
|
251
300
|
//console.log( that, '.trigger(', ev, data, bubble, ')' );
|
|
252
|
-
bubble = bubble || 'l';
|
|
253
301
|
|
|
254
302
|
// run all triggers
|
|
255
303
|
if (that.constructor === MC || that.constructor === DC) {
|
|
304
|
+
let event =
|
|
305
|
+
ev instanceof McEvent
|
|
306
|
+
? new McEvent(ev.type, ev.data, 'l')
|
|
307
|
+
: new McEvent(ev, data, 'l'),
|
|
308
|
+
mcEvent: McEvent =
|
|
309
|
+
typeof ev !== 'string'
|
|
310
|
+
? (ev as McEvent)
|
|
311
|
+
: new McEvent(ev, data, bubble);
|
|
256
312
|
[...Object.getOwnPropertyNames(that)].forEach((mc) => {
|
|
257
313
|
if (
|
|
258
314
|
(that as any)[mc]?.trigger &&
|
|
259
315
|
typeof (that as any)[mc]?.trigger === 'function'
|
|
260
316
|
) {
|
|
261
|
-
(that as any)[mc]?.trigger(
|
|
317
|
+
(that as any)[mc]?.trigger(event);
|
|
262
318
|
}
|
|
263
319
|
});
|
|
320
|
+
|
|
321
|
+
if (/[ud]/.test(mcEvent.bubble)) {
|
|
322
|
+
bubbleEvent(that.target, mcEvent);
|
|
323
|
+
}
|
|
324
|
+
|
|
264
325
|
return; // must return here!
|
|
265
326
|
}
|
|
266
327
|
|
|
@@ -294,33 +355,9 @@ class MC extends McBase {
|
|
|
294
355
|
return that;
|
|
295
356
|
}
|
|
296
357
|
|
|
297
|
-
//
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
isBrowser() &&
|
|
301
|
-
/[ud]/.test(mcEvent.bubble) &&
|
|
302
|
-
(that as any) instanceof MC
|
|
303
|
-
) {
|
|
304
|
-
setTimeout(() => {
|
|
305
|
-
// bubbling must include 'l' for local, or else no handlers are executed'
|
|
306
|
-
if (mcEvent.bubble.indexOf('l') === -1) {
|
|
307
|
-
mcEvent.bubble += 'l';
|
|
308
|
-
}
|
|
309
|
-
|
|
310
|
-
// bubble up towards root
|
|
311
|
-
if (mcEvent.bubble.indexOf('u') > -1) {
|
|
312
|
-
(that as any).parent().forEach((mc: any) => {
|
|
313
|
-
mc instanceof MC ? (mc as any).trigger(mcEvent) : null;
|
|
314
|
-
});
|
|
315
|
-
}
|
|
316
|
-
|
|
317
|
-
// bubble down
|
|
318
|
-
if (mcEvent.bubble.indexOf('d') > -1) {
|
|
319
|
-
(that as any).children().forEach((mc: any) => {
|
|
320
|
-
mc instanceof MC ? (mc as any).trigger(mcEvent) : null;
|
|
321
|
-
});
|
|
322
|
-
}
|
|
323
|
-
}, 0);
|
|
358
|
+
//console.log('bubble', mcEvent);
|
|
359
|
+
if (/[ud]/.test(mcEvent.bubble)) {
|
|
360
|
+
bubbleEvent(that.target, mcEvent);
|
|
324
361
|
}
|
|
325
362
|
}
|
|
326
363
|
}
|
|
@@ -18,16 +18,15 @@ function isObservableObject(value: any): boolean {
|
|
|
18
18
|
type Callback = (value: any) => void;
|
|
19
19
|
|
|
20
20
|
function getPlaceholders(target: HTMLElement): string[] {
|
|
21
|
-
let placeholders: Set<string> = new Set()
|
|
21
|
+
let placeholders: Set<string> = new Set(),
|
|
22
|
+
regEx = /\{[^\{\}]*\}/g;
|
|
22
23
|
|
|
23
24
|
// scan attributes
|
|
24
25
|
target
|
|
25
26
|
.getAttributeNames()
|
|
26
|
-
.filter((attr) => target.getAttribute(attr)?.match(
|
|
27
|
+
.filter((attr) => target.getAttribute(attr)?.match(regEx)) // extract placeholder(s)
|
|
27
28
|
.forEach((attr) => {
|
|
28
|
-
let phs: Set<string> = new Set(
|
|
29
|
-
target.getAttribute(attr)?.match(/\{[^\{\}]*\}/g)
|
|
30
|
-
);
|
|
29
|
+
let phs: Set<string> = new Set(target.getAttribute(attr)?.match(regEx));
|
|
31
30
|
phs.forEach((placeholder) =>
|
|
32
31
|
placeholders.add(placeholder.replace(/[\{\}]/g, ''))
|
|
33
32
|
);
|
|
@@ -39,12 +38,12 @@ function getPlaceholders(target: HTMLElement): string[] {
|
|
|
39
38
|
return (
|
|
40
39
|
// is text node and has placeholders
|
|
41
40
|
childNode.nodeType === 3 &&
|
|
42
|
-
((childNode as any).nodeValue || '').match(
|
|
41
|
+
((childNode as any).nodeValue || '').match(regEx)
|
|
43
42
|
);
|
|
44
43
|
})
|
|
45
44
|
.forEach((childNode) => {
|
|
46
45
|
((childNode as any).nodeValue || '')
|
|
47
|
-
.match(
|
|
46
|
+
.match(regEx)
|
|
48
47
|
.forEach((placeholder: string) => {
|
|
49
48
|
placeholders.add(placeholder.replace(/[\{\}]/g, ''));
|
|
50
49
|
});
|
|
@@ -150,7 +149,9 @@ class Placeholders extends DC {
|
|
|
150
149
|
function getPlaceholderElements(
|
|
151
150
|
target: HTMLElement | DocumentFragment | ShadowRoot
|
|
152
151
|
): HTMLElement[] {
|
|
153
|
-
let elements: Array<HTMLElement
|
|
152
|
+
let elements: Array<HTMLElement> = (
|
|
153
|
+
target instanceof HTMLElement ? [target] : []
|
|
154
|
+
)
|
|
154
155
|
.concat([...(target.querySelectorAll('*') as unknown as HTMLElement[])])
|
|
155
156
|
.filter((e) => !!getPlaceholders(e as HTMLElement).length);
|
|
156
157
|
return elements as HTMLElement[];
|
|
@@ -159,9 +160,10 @@ function getPlaceholderElements(
|
|
|
159
160
|
function makePlaceHolders(
|
|
160
161
|
element: HTMLElement | DocumentFragment | ShadowRoot
|
|
161
162
|
): void {
|
|
162
|
-
getPlaceholderElements(element).forEach((e) =>
|
|
163
|
-
|
|
164
|
-
|
|
163
|
+
getPlaceholderElements(element).forEach((e: HTMLElement) => {
|
|
164
|
+
if ((e as HTMLMcElement)?._mc?._placeholders) return;
|
|
165
|
+
DC.add(e, '_placeholders', new Placeholders(e));
|
|
166
|
+
});
|
|
165
167
|
}
|
|
166
168
|
|
|
167
169
|
export type Observable = {
|
|
@@ -225,14 +227,19 @@ export const observe = (target: LooseObject, propertyName?: string) => {
|
|
|
225
227
|
|
|
226
228
|
bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
|
|
227
229
|
const that = this,
|
|
228
|
-
iso = isObservableObject(that.valueOf())
|
|
229
|
-
bound = (that.constructor as any).bound;
|
|
230
|
+
iso = isObservableObject(that.valueOf());
|
|
230
231
|
//console.log('bind', iso, target);
|
|
231
232
|
|
|
232
233
|
if (iso) {
|
|
233
234
|
makePlaceHolders(target);
|
|
234
235
|
(this.constructor as any).callbacks.push((data: LooseObject) => {
|
|
235
|
-
|
|
236
|
+
// avoid bubbling for speed
|
|
237
|
+
new DC(target as HTMLMcElement)
|
|
238
|
+
.descendants('_placeholders')
|
|
239
|
+
.forEach((e) => {
|
|
240
|
+
if (!e) return;
|
|
241
|
+
e.trigger('data', flattenObject(data));
|
|
242
|
+
});
|
|
236
243
|
});
|
|
237
244
|
that.notify();
|
|
238
245
|
} else {
|
package/public/src/test.ts
CHANGED
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
3
|
import {
|
|
4
|
-
HTMLMcElement,
|
|
5
4
|
LooseObject,
|
|
6
5
|
MC,
|
|
7
6
|
DC,
|
|
@@ -48,13 +47,15 @@ class Translator extends DC {
|
|
|
48
47
|
}
|
|
49
48
|
});
|
|
50
49
|
|
|
51
|
-
(that.Translation as Observable).bind(
|
|
50
|
+
(that.Translation as Observable).bind(translationTargetObject);
|
|
52
51
|
|
|
53
52
|
this.target.setAttribute('language', 'en');
|
|
53
|
+
|
|
54
|
+
(this.Language as Observable).notify();
|
|
54
55
|
}
|
|
55
56
|
|
|
56
57
|
oneInit() {
|
|
57
|
-
(this.Language as Observable).notify(); // trigger translation
|
|
58
|
+
//(this.Language as Observable).notify(); // trigger translation
|
|
58
59
|
}
|
|
59
60
|
|
|
60
61
|
onAttributeChanged(ev: McEvent) {
|
|
@@ -74,7 +75,7 @@ defineCE(
|
|
|
74
75
|
// equivalent to custom element registry .define()
|
|
75
76
|
'my-tag',
|
|
76
77
|
class MyTag extends DC {
|
|
77
|
-
#template: string = '{lang.click} {counter}';
|
|
78
|
+
#template: string = '<button>{lang.click} {counter}</button>';
|
|
78
79
|
|
|
79
80
|
#languages = {
|
|
80
81
|
en: {
|
|
@@ -92,6 +93,9 @@ defineCE(
|
|
|
92
93
|
|
|
93
94
|
let that = this; // minifier help
|
|
94
95
|
|
|
96
|
+
// hide
|
|
97
|
+
target.setAttribute('style', 'display:none');
|
|
98
|
+
|
|
95
99
|
// render
|
|
96
100
|
target.innerHTML = this.#template;
|
|
97
101
|
|
|
@@ -114,6 +118,9 @@ defineCE(
|
|
|
114
118
|
|
|
115
119
|
// bind Dom to target
|
|
116
120
|
(that.Dom as Observable).bind(that.target);
|
|
121
|
+
|
|
122
|
+
// show
|
|
123
|
+
setTimeout(() => that.target.removeAttribute('style'), 100);
|
|
117
124
|
}
|
|
118
125
|
|
|
119
126
|
onAttributeChanged(ev: McEvent) {
|
|
@@ -122,7 +129,13 @@ defineCE(
|
|
|
122
129
|
}
|
|
123
130
|
|
|
124
131
|
onClick(ev: McEvent) {
|
|
125
|
-
this
|
|
132
|
+
const that = this,
|
|
133
|
+
c = this.Dom.counter++;
|
|
134
|
+
(ev.data as PointerEvent).stopPropagation();
|
|
135
|
+
(this.target as HTMLElement).classList.remove('clicked');
|
|
136
|
+
(this.target as HTMLElement).classList.add(
|
|
137
|
+
that.Dom.counter > 9 ? 'overClicked' : 'clicked'
|
|
138
|
+
);
|
|
126
139
|
}
|
|
127
140
|
},
|
|
128
141
|
['language']
|
|
@@ -135,13 +148,11 @@ let MyTag: CustomElementConstructor = getCE('my-tag')!,
|
|
|
135
148
|
stress test
|
|
136
149
|
*/
|
|
137
150
|
|
|
138
|
-
/*
|
|
139
151
|
let start = new Date().getTime();
|
|
140
152
|
|
|
141
|
-
// create
|
|
142
|
-
for (let x = 0; x <
|
|
143
|
-
|
|
144
|
-
fragment.append(mt);
|
|
153
|
+
// create 100 elements
|
|
154
|
+
for (let x = 0; x < 100; x++) {
|
|
155
|
+
fragment.append(new MyTag());
|
|
145
156
|
}
|
|
146
157
|
|
|
147
158
|
let end = new Date().getTime();
|
|
@@ -149,8 +160,7 @@ let end = new Date().getTime();
|
|
|
149
160
|
// and put them into the DOM
|
|
150
161
|
document.body.appendChild(fragment);
|
|
151
162
|
|
|
152
|
-
document.querySelectorAll('my-tag').forEach((e) => e.remove());
|
|
153
|
-
*/
|
|
163
|
+
//document.querySelectorAll('my-tag').forEach((e) => e.remove());
|
|
154
164
|
|
|
155
165
|
/*
|
|
156
166
|
console test
|
|
@@ -159,15 +169,13 @@ console test
|
|
|
159
169
|
setTimeout(() => {
|
|
160
170
|
console.clear();
|
|
161
171
|
|
|
162
|
-
/*
|
|
163
172
|
console.log(
|
|
164
|
-
'%c \n\nStress Test:\n\n %cInstancing
|
|
173
|
+
'%c \n\nStress Test:\n\n %cInstancing 100 web components: %c %s ms.',
|
|
165
174
|
'font-weight: bold; color: black;',
|
|
166
175
|
'font-weight: normal;',
|
|
167
176
|
'font-weight: bold; color: blue;',
|
|
168
|
-
|
|
177
|
+
end - start
|
|
169
178
|
);
|
|
170
|
-
*/
|
|
171
179
|
|
|
172
180
|
document.body.appendChild(new MyTag());
|
|
173
181
|
|
|
@@ -184,4 +192,4 @@ setTimeout(() => {
|
|
|
184
192
|
|
|
185
193
|
// will trigger the event on all micro components contained in <my-tag>
|
|
186
194
|
DC.trigger(element, 'doSomething');
|
|
187
|
-
},
|
|
195
|
+
}, 500);
|
package/public/test.html
CHANGED
|
@@ -1,14 +1,23 @@
|
|
|
1
1
|
<!DOCTYPE html>
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
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
|
+
<script src="./microcomponents.min.js"></script>
|
|
15
|
+
<script>
|
|
16
|
+
Object.assign(window, microcomponents); // make global
|
|
17
|
+
</script>
|
|
18
|
+
<script type="module" src="./test.js"></script>
|
|
19
|
+
</head>
|
|
20
|
+
<body>
|
|
21
|
+
Open the debugger, read console, then:
|
|
22
|
+
</body>
|
|
14
23
|
</html>
|