@twobirds/microcomponents 0.0.37 → 0.0.39
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 +6 -2
- 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 +11 -12
- package/dist/test.ts +19 -16
- 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/elements.min.js +1 -1
- package/public/microcomponents.min.js +1 -1
- package/public/my-tag.css +6 -2
- package/public/observables.js +11 -7
- 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 +11 -12
- package/public/src/test.ts +19 -16
- package/public/test.js +15 -24
- package/public/test.js.map +1 -1
- package/src/MC.ts +69 -32
- package/src/observables.ts +11 -12
- package/src/test.ts +19 -16
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
|
});
|
|
@@ -102,7 +102,11 @@ function getPlaceholderElements(target) {
|
|
|
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,7 +158,7 @@ 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);
|
|
@@ -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 o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},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((o=>{var n;(n=t[o])&&n.constructor&&n.constructor===Object?e[o]=r(t[o]):e[o]=t[o]})),e}function o(t,e=!0){let n={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=o(t[e],!1);for(const t in r)n[e+"."+t]=r[t]}else n[e]=t[e]})),e?r(n):n}function n(t,e){return JSON.stringify(o(t))===JSON.stringify(o(e))}function c(t,e){let r;return()=>{clearTimeout(r),r=setTimeout((function(){t(...arguments)}),e)}}t.r(e),t.d(e,{observe:()=>
|
|
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 o in r)t.o(r,o)&&!t.o(e,o)&&Object.defineProperty(e,o,{enumerable:!0,get:r[o]})},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((o=>{var n;(n=t[o])&&n.constructor&&n.constructor===Object?e[o]=r(t[o]):e[o]=t[o]})),e}function o(t,e=!0){let n={};return[...Object.getOwnPropertyNames(t)].forEach((e=>{if(t[e]&&t[e].constructor&&t[e].constructor===Object){const r=o(t[e],!1);for(const t in r)n[e+"."+t]=r[t]}else n[e]=t[e]})),e?r(n):n}function n(t,e){return JSON.stringify(o(t))===JSON.stringify(o(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 o=t?._mc;!e&&o?r=r.concat(Object.values(t._mc)):e&&o&&o[e]&&r.push(o[e])}})),r}function b(t,e,r=!0){let o=[];for(;t;){if(t._mc&&(e?e&&t._mc[e]&&o.push(t._mc[e]):o=o.concat(Object.values(t._mc)),r))return o;t=t.parentNode}return o}function d(t){return t&&t instanceof HTMLElement}function p(t,e,r={}){let o=t;if(!o._mc){let e=v?.debug;v.debug=!1,o._mc=new v(t),v.debug=e,delete o._mc._mc}const n=o._mc;return e.length&&!n[e]&&(n[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={},o="l"){let n=t?._mc;if(!n)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,o);[...Object.values(n)].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=b(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{#o;constructor(t,e=!1){var r;this.#o=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((o=>{let n=/^one/.test(o),c=o.replace(/^on[e]{0,1}/,""),a=c.toLowerCase();n&&Object.defineProperty(t,"on"+c,{configurable:!0,enumerable:!1,writable:!0,value:t=>{r.constructor.prototype[o].bind(r)(t)}}),u.has("on"+a)&&function(t,e,r,o=!1,n=!1){let c={once:!1};o&&(c.capture=o),n&&(c.once=n),t.addEventListener(e,r,c)}(e,a,(t=>{r.trigger(c,t)}),!1,n)}))}}(this)}get target(){return this.#o.deref()}}class O extends y{_mc={};constructor(t){super(t)}static trigger=h;trigger(t,e={},r="l"){let o=this;if(o.constructor===O||o.constructor===v){let n=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(o)].forEach((t=>{o[t]?.trigger&&"function"==typeof o[t]?.trigger&&o[t]?.trigger(n)})),void(/[ud]/.test(c.bubble)&&m(o.target,c))}if(o instanceof O||o instanceof v){const o=this,n="string"!=typeof t?t:new i(t,e,r),c="on"+n.type[0].toUpperCase()+n.type.slice(1);if(n.bubble.indexOf("l")>-1&&(n.immediateStopped||"function"!=typeof o[c]||(o[c](n),o.hasOwnProperty(c)&&delete o[c])),n.stopped||"l"===n.bubble)return o;/[ud]/.test(n.bubble)&&m(o.target,n)}}}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 d(e)?b(e.parentNode,t,!0):[]}ancestors(t=""){let e=this?.target;return d(e)?b(this.target.parentNode,t,!1):[]}children(t=""){let e=this?.target;if(!d(e))return[];const r=Math.random().toString().replace(".",""),o='[_mc]:not([temp_id="'+r+'"] [_mc] [_mc])';e.setAttribute("temp_id",r);const n=f([...e.querySelectorAll(o)],t);return e.removeAttribute("temp_id"),n}descendants(t=""){let e=this?.target;return d(e)?f([...e.querySelectorAll("*[_mc]")],t):[]}}function w(t){return null!=t&&"object"==typeof t}function j(t){let e=new Set,r=/\{[^\{\}]*\}/g;return t.getAttributeNames().filter((e=>t.getAttribute(e)?.match(r))).forEach((o=>{new Set(t.getAttribute(o)?.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 E extends v{data={};placeholders=[];constructor(t){super(t);let e=this;j(t).forEach((t=>e.data[t]="")),_(e),e.#n()}#n(){let t=this,e=t.target;e.getAttributeNames().filter((t=>e.getAttribute(t)?.match(/\{[^\{\}]*\}/g))).forEach((r=>{let o=new Set(e.getAttribute(r)?.match(/\{[^\{\}]*\}/g));var n;t.data.observe((n=e.getAttribute(r),t=>{let c=n;o.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 o;t.data.observe((o=e.nodeValue,t=>{let n=o;r.forEach((e=>{n=n.replace(e,t[e.replace(/[\{\}]/g,"")])})),e.nodeValue=n}))}))}onData(t){let e=this,r={};Object.keys(t.data).forEach((o=>{e.data.hasOwnProperty(o)&&(r[o]=t.data[o])})),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].concat([...e.querySelectorAll("*")]).filter((t=>!!j(t).length))).forEach((t=>{t?._mc?._placeholders||v.add(t,"_placeholders",new E(t))}))}(t),this.constructor.callbacks.push((e=>{v.trigger(t,"data",o(e),"ld")})),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(){n(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,o=i.constructor.callbacks,a=i.constructor.bound;i=new s(structuredClone(Object.assign({},t))),i.constructor.callbacks=r,i.constructor.callbacks=o,i.constructor.bound=a,setTimeout(c((function(){n(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
|
});
|
|
@@ -159,9 +158,10 @@ function getPlaceholderElements(
|
|
|
159
158
|
function makePlaceHolders(
|
|
160
159
|
element: HTMLElement | DocumentFragment | ShadowRoot
|
|
161
160
|
): void {
|
|
162
|
-
getPlaceholderElements(element).forEach((e) =>
|
|
163
|
-
|
|
164
|
-
|
|
161
|
+
getPlaceholderElements(element).forEach((e: HTMLElement) => {
|
|
162
|
+
if ((e as HTMLMcElement)?._mc?._placeholders) return;
|
|
163
|
+
DC.add(e, '_placeholders', new Placeholders(e));
|
|
164
|
+
});
|
|
165
165
|
}
|
|
166
166
|
|
|
167
167
|
export type Observable = {
|
|
@@ -225,8 +225,7 @@ export const observe = (target: LooseObject, propertyName?: string) => {
|
|
|
225
225
|
|
|
226
226
|
bind(target: HTMLElement | DocumentFragment | ShadowRoot) {
|
|
227
227
|
const that = this,
|
|
228
|
-
iso = isObservableObject(that.valueOf())
|
|
229
|
-
bound = (that.constructor as any).bound;
|
|
228
|
+
iso = isObservableObject(that.valueOf());
|
|
230
229
|
//console.log('bind', iso, target);
|
|
231
230
|
|
|
232
231
|
if (iso) {
|
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) {
|
|
@@ -123,6 +130,7 @@ defineCE(
|
|
|
123
130
|
|
|
124
131
|
onClick(ev: McEvent) {
|
|
125
132
|
this.Dom.counter++;
|
|
133
|
+
(this.target as HTMLElement).classList.add('clicked');
|
|
126
134
|
}
|
|
127
135
|
},
|
|
128
136
|
['language']
|
|
@@ -135,13 +143,11 @@ let MyTag: CustomElementConstructor = getCE('my-tag')!,
|
|
|
135
143
|
stress test
|
|
136
144
|
*/
|
|
137
145
|
|
|
138
|
-
/*
|
|
139
146
|
let start = new Date().getTime();
|
|
140
147
|
|
|
141
|
-
// create
|
|
142
|
-
for (let x = 0; x <
|
|
143
|
-
|
|
144
|
-
fragment.append(mt);
|
|
148
|
+
// create 100 elements
|
|
149
|
+
for (let x = 0; x < 100; x++) {
|
|
150
|
+
fragment.append(new MyTag());
|
|
145
151
|
}
|
|
146
152
|
|
|
147
153
|
let end = new Date().getTime();
|
|
@@ -149,8 +155,7 @@ let end = new Date().getTime();
|
|
|
149
155
|
// and put them into the DOM
|
|
150
156
|
document.body.appendChild(fragment);
|
|
151
157
|
|
|
152
|
-
document.querySelectorAll('my-tag').forEach((e) => e.remove());
|
|
153
|
-
*/
|
|
158
|
+
//document.querySelectorAll('my-tag').forEach((e) => e.remove());
|
|
154
159
|
|
|
155
160
|
/*
|
|
156
161
|
console test
|
|
@@ -159,15 +164,13 @@ console test
|
|
|
159
164
|
setTimeout(() => {
|
|
160
165
|
console.clear();
|
|
161
166
|
|
|
162
|
-
/*
|
|
163
167
|
console.log(
|
|
164
|
-
'%c \n\nStress Test:\n\n %cInstancing
|
|
168
|
+
'%c \n\nStress Test:\n\n %cInstancing 100 web components: %c %s ms.',
|
|
165
169
|
'font-weight: bold; color: black;',
|
|
166
170
|
'font-weight: normal;',
|
|
167
171
|
'font-weight: bold; color: blue;',
|
|
168
|
-
|
|
172
|
+
end - start
|
|
169
173
|
);
|
|
170
|
-
*/
|
|
171
174
|
|
|
172
175
|
document.body.appendChild(new MyTag());
|
|
173
176
|
|
|
@@ -184,4 +187,4 @@ setTimeout(() => {
|
|
|
184
187
|
|
|
185
188
|
// will trigger the event on all micro components contained in <my-tag>
|
|
186
189
|
DC.trigger(element, 'doSomething');
|
|
187
|
-
},
|
|
190
|
+
}, 500);
|
package/public/test.js
CHANGED
|
@@ -23,11 +23,12 @@ class Translator extends DC {
|
|
|
23
23
|
that.Translation = { lang: that.#translations[lang] }; // set translation
|
|
24
24
|
}
|
|
25
25
|
});
|
|
26
|
-
that.Translation.bind(
|
|
26
|
+
that.Translation.bind(translationTargetObject);
|
|
27
27
|
this.target.setAttribute('language', 'en');
|
|
28
|
+
this.Language.notify();
|
|
28
29
|
}
|
|
29
30
|
oneInit() {
|
|
30
|
-
this.Language.notify(); // trigger translation
|
|
31
|
+
//(this.Language as Observable).notify(); // trigger translation
|
|
31
32
|
}
|
|
32
33
|
onAttributeChanged(ev) {
|
|
33
34
|
if (!ev.data.newValue)
|
|
@@ -43,7 +44,7 @@ class Translator extends DC {
|
|
|
43
44
|
defineCE(
|
|
44
45
|
// equivalent to custom element registry .define()
|
|
45
46
|
'my-tag', class MyTag extends DC {
|
|
46
|
-
#template = '{lang.click} {counter}';
|
|
47
|
+
#template = '<button>{lang.click} {counter}</button>';
|
|
47
48
|
#languages = {
|
|
48
49
|
en: {
|
|
49
50
|
click: 'click me',
|
|
@@ -56,6 +57,8 @@ defineCE(
|
|
|
56
57
|
constructor(target) {
|
|
57
58
|
super(target);
|
|
58
59
|
let that = this; // minifier help
|
|
60
|
+
// hide
|
|
61
|
+
target.setAttribute('style', 'display:none');
|
|
59
62
|
// render
|
|
60
63
|
target.innerHTML = this.#template;
|
|
61
64
|
// add public translator
|
|
@@ -69,6 +72,8 @@ defineCE(
|
|
|
69
72
|
observe(that);
|
|
70
73
|
// bind Dom to target
|
|
71
74
|
that.Dom.bind(that.target);
|
|
75
|
+
// show
|
|
76
|
+
setTimeout(() => that.target.removeAttribute('style'), 100);
|
|
72
77
|
}
|
|
73
78
|
onAttributeChanged(ev) {
|
|
74
79
|
//console.log(ev);
|
|
@@ -76,46 +81,32 @@ defineCE(
|
|
|
76
81
|
}
|
|
77
82
|
onClick(ev) {
|
|
78
83
|
this.Dom.counter++;
|
|
84
|
+
this.target.classList.add('clicked');
|
|
79
85
|
}
|
|
80
86
|
}, ['language']);
|
|
81
87
|
let MyTag = getCE('my-tag'), fragment = new DocumentFragment();
|
|
82
88
|
/*
|
|
83
89
|
stress test
|
|
84
90
|
*/
|
|
85
|
-
/*
|
|
86
91
|
let start = new Date().getTime();
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
let mt = new MyTag('my-data');
|
|
91
|
-
fragment.append(mt);
|
|
92
|
+
// create 100 elements
|
|
93
|
+
for (let x = 0; x < 100; x++) {
|
|
94
|
+
fragment.append(new MyTag());
|
|
92
95
|
}
|
|
93
|
-
|
|
94
96
|
let end = new Date().getTime();
|
|
95
|
-
|
|
96
97
|
// and put them into the DOM
|
|
97
98
|
document.body.appendChild(fragment);
|
|
98
|
-
|
|
99
|
-
document.querySelectorAll('my-tag').forEach((e) => e.remove());
|
|
100
|
-
*/
|
|
99
|
+
//document.querySelectorAll('my-tag').forEach((e) => e.remove());
|
|
101
100
|
/*
|
|
102
101
|
console test
|
|
103
102
|
*/
|
|
104
103
|
setTimeout(() => {
|
|
105
104
|
console.clear();
|
|
106
|
-
|
|
107
|
-
console.log(
|
|
108
|
-
'%c \n\nStress Test:\n\n %cInstancing 1000 web components: %c %s ms.',
|
|
109
|
-
'font-weight: bold; color: black;',
|
|
110
|
-
'font-weight: normal;',
|
|
111
|
-
'font-weight: bold; color: blue;',
|
|
112
|
-
0
|
|
113
|
-
);
|
|
114
|
-
*/
|
|
105
|
+
console.log('%c \n\nStress Test:\n\n %cInstancing 100 web components: %c %s ms.', 'font-weight: bold; color: black;', 'font-weight: normal;', 'font-weight: bold; color: blue;', end - start);
|
|
115
106
|
document.body.appendChild(new MyTag());
|
|
116
107
|
let element = document.querySelector('my-tag');
|
|
117
108
|
console.log("\n\n%cInspect this tag:%c \n( ...to see the inner structure in the '._mc' property )\n\n %O %c %s", 'font-weight: bold;', 'font-weight: normal;', element, 'font-weight: bold;', '\n\nLook up code in the debugger: test.js\n\n');
|
|
118
109
|
// will trigger the event on all micro components contained in <my-tag>
|
|
119
110
|
DC.trigger(element, 'doSomething');
|
|
120
|
-
},
|
|
111
|
+
}, 500);
|
|
121
112
|
//# sourceMappingURL=test.js.map
|
package/public/test.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"test.js","sourceRoot":"","sources":["../src/test.ts"],"names":[],"mappings":"AAAA,YAAY,CAAC;AAEb,OAAO,
|
|
1
|
+
{"version":3,"file":"test.js","sourceRoot":"","sources":["../src/test.ts"],"names":[],"mappings":"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"}
|