jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-21 15:39:36 +01:00
Code Packages Releases Activity

🗑️/🐛 clean up issues due mergering

Browse Source
This commit is contained in:
Jan Andrle 2024-01-31 15:01:38 +01:00
parent 8c27fe8015
commit b0d5d2f882
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
9 changed files with 74 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
dist/dde-with-observables.js vendored
View File

File diff suppressed because one or more lines are too long

40
dist/dde.js vendored
View File

File diff suppressed because one or more lines are too long

8
dist/esm-with-observables.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/esm.js vendored
View File

File diff suppressed because one or more lines are too long

1
examples/components/webComponent.js
View File

@ -21,7 +21,6 @@ export class CustomHTMLTestElement extends HTMLElement{
}
render({ name, preName, test }){
console.log(scope.state);
console.log({ name, preName, test });
scope.host(
on.connected(()=> console.log(CustomHTMLTestElement)),
on.attributeChanged(e=> console.log(e)),

14
src/customElement.js
View File

@ -1,4 +1,4 @@
import { keyLTE } from "./dom-common.js";
import { keyLTE, evc, evd, eva } from "./dom-common.js";
import { scope } from "./dom.js";
import { c_ch_o } from "./events-observer.js";
export function customElementRender(custom_element, target, render, props= observedAttributes){
@ -10,26 +10,26 @@ export function customElementRender(custom_element, target, render, props= obser
const is_lte= custom_element[keyLTE];
if(!is_lte) lifecycleToEvents(custom_element);
const out= render.call(custom_element, props);
if(!is_lte) custom_element.dispatchEvent(new Event("dde:connected"));
if(!is_lte) custom_element.dispatchEvent(new Event(evc));
if(target.nodeType===11 && typeof target.mode==="string") // is ShadowRoot
custom_element.addEventListener("dde:disconnected", c_ch_o.observe(target), { once: true });
custom_element.addEventListener(evd, c_ch_o.observe(target), { once: true });
scope.pop();
return target.append(out);
}
export function lifecycleToEvents(class_declaration){
wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail){
target.apply(thisArg, detail);
thisArg.dispatchEvent(new Event("dde:connected"));
thisArg.dispatchEvent(new Event(evc));
});
wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail){
target.apply(thisArg, detail);
(queueMicrotask || setTimeout)(
()=> !thisArg.isConnected && thisArg.dispatchEvent(new Event("dde:disconnected"))
()=> !thisArg.isConnected && thisArg.dispatchEvent(new Event(evd))
);
});
wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail){
const [ attribute, , value ]= detail;
thisArg.dispatchEvent(new CustomEvent("dde:attributeChanged", {
thisArg.dispatchEvent(new CustomEvent(eva, {
detail: [ attribute, value ]
}));
target.apply(thisArg, detail);
@ -45,4 +45,4 @@ function wrapMethod(obj, method, apply){
import { observedAttributes as oA } from "./helpers.js";
export function observedAttributes(instance){
return oA(instance, (i, n)=> i.getAttribute(n));
}
}

3
src/dom-common.js
View File

@ -27,3 +27,6 @@ function setDeleteAttr(obj, prop, val){
return Reflect.set(obj, prop, "");
}
export const keyLTE= "__dde_lifecycleToEvents"; //boolean
export const evc= "dde:connected";
export const evd= "dde:disconnected";
export const eva= "dde:attributeChanged";

6
src/events-observer.js
View File

@ -1,4 +1,4 @@
import { enviroment as env } from './dom-common.js';
import { enviroment as env, evc, evd } from './dom-common.js';
export const c_ch_o= env.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
get(){ return ()=> {}; }
});
@ -107,7 +107,7 @@ function connectionsChangesObserverConstructor(){
const ls= store.get(element);
if(!ls.length_c) continue;
element.dispatchEvent(new Event("dde:connected"));
element.dispatchEvent(new Event(evc));
ls.connected= new WeakSet();
ls.length_c= 0;
if(!ls.length_d) store.delete(element);
@ -131,7 +131,7 @@ function connectionsChangesObserverConstructor(){
function dispatchRemove(element){
return ()=> {
if(element.isConnected) return;
element.dispatchEvent(new Event("dde:disconnected"));
element.dispatchEvent(new Event(evd));
store.delete(element);
};
}

34
src/events.js
View File

@ -1,5 +1,5 @@
export { registerReactivity } from './observables-common.js';
import { enviroment as env, keyLTE } from './dom-common.js';
import { enviroment as env, keyLTE, evc, evd, eva } from './dom-common.js';
export function dispatchEvent(name, options, host){
if(!options) options= {};
@ -20,23 +20,16 @@ export function on(event, listener, options){
}
import { c_ch_o } from "./events-observer.js";
const els_attribute_store= new WeakSet();
import { scope } from "./dom.js";
import { onAbort } from './helpers.js';
const lifeOptions= obj=> Object.assign({}, typeof obj==="object" ? obj : null, { once: true });
//TODO: cleanUp when event before abort?
//TODO: docs (e.g.) https://nolanlawson.com/2024/01/13/web-component-gotcha-constructor-vs-connectedcallback/
on.connected= function(listener, options){
const { custom_element }= scope.current;
const name= "connected";
if(typeof options !== "object")
options= {};
options.once= true;
options= lifeOptions(options);
return function registerElement(element){
if(custom_element) element= custom_element;
const event= "dde:"+name;
element.addEventListener(event, listener, options);
element.addEventListener(evc, listener, options);
if(element[keyLTE]) return element;
if(element.isConnected) return ( element.dispatchEvent(new Event(event)), element );
if(element.isConnected) return ( element.dispatchEvent(new Event(evc)), element );
const c= onAbort(options.signal, ()=> c_ch_o.offConnected(element, listener));
if(c) c_ch_o.onConnected(element, listener);
@ -44,15 +37,9 @@ on.connected= function(listener, options){
};
};
on.disconnected= function(listener, options){
const { custom_element }= scope.current;
const name= "disconnected";
if(typeof options !== "object")
options= {};
options.once= true;
options= lifeOptions(options);
return function registerElement(element){
if(custom_element) element= custom_element;
const event= "dde:"+name;
element.addEventListener(event, listener, options);
element.addEventListener(evd, listener, options);
if(element[keyLTE]) return element;
const c= onAbort(options.signal, ()=> c_ch_o.offDisconnected(element, listener));
@ -69,13 +56,12 @@ on.disconnectedAsAbort= function(host){
host(on.disconnected(()=> a.abort()));
return a;
};
const els_attribute_store= new WeakSet();
on.attributeChanged= function(listener, options){
const name= "attributeChanged";
if(typeof options !== "object")
options= {};
return function registerElement(element){
const event= "dde:"+name;
element.addEventListener(event, listener, options);
element.addEventListener(eva, listener, options);
if(element[keyLTE] || els_attribute_store.has(element))
return element;
@ -84,7 +70,7 @@ on.attributeChanged= function(listener, options){
const observer= new env.M(function(mutations){
for(const { attributeName, target } of mutations)
target.dispatchEvent(
new CustomEvent(event, { detail: [ attributeName, target.getAttribute(attributeName) ] }));
new CustomEvent(eva, { detail: [ attributeName, target.getAttribute(attributeName) ] }));
});
const c= onAbort(options.signal, ()=> observer.disconnect());
if(c) observer.observe(element, { attributes: true });