jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-21 23:39:37 +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 }){ render({ name, preName, test }){
console.log(scope.state); console.log(scope.state);
console.log({ name, preName, test });
scope.host( scope.host(
on.connected(()=> console.log(CustomHTMLTestElement)), on.connected(()=> console.log(CustomHTMLTestElement)),
on.attributeChanged(e=> console.log(e)), 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 { scope } from "./dom.js";
import { c_ch_o } from "./events-observer.js"; import { c_ch_o } from "./events-observer.js";
export function customElementRender(custom_element, target, render, props= observedAttributes){ 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]; const is_lte= custom_element[keyLTE];
if(!is_lte) lifecycleToEvents(custom_element); if(!is_lte) lifecycleToEvents(custom_element);
const out= render.call(custom_element, props); 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 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(); scope.pop();
return target.append(out); return target.append(out);
} }
export function lifecycleToEvents(class_declaration){ export function lifecycleToEvents(class_declaration){
wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail){ wrapMethod(class_declaration.prototype, "connectedCallback", function(target, thisArg, detail){
target.apply(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){ wrapMethod(class_declaration.prototype, "disconnectedCallback", function(target, thisArg, detail){
target.apply(thisArg, detail); target.apply(thisArg, detail);
(queueMicrotask || setTimeout)( (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){ wrapMethod(class_declaration.prototype, "attributeChangedCallback", function(target, thisArg, detail){
const [ attribute, , value ]= detail; const [ attribute, , value ]= detail;
thisArg.dispatchEvent(new CustomEvent("dde:attributeChanged", { thisArg.dispatchEvent(new CustomEvent(eva, {
detail: [ attribute, value ] detail: [ attribute, value ]
})); }));
target.apply(thisArg, detail); target.apply(thisArg, detail);
@ -45,4 +45,4 @@ function wrapMethod(obj, method, apply){
import { observedAttributes as oA } from "./helpers.js"; import { observedAttributes as oA } from "./helpers.js";
export function observedAttributes(instance){ export function observedAttributes(instance){
return oA(instance, (i, n)=> i.getAttribute(n)); 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, ""); return Reflect.set(obj, prop, "");
} }
export const keyLTE= "__dde_lifecycleToEvents"; //boolean 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({}, { export const c_ch_o= env.M ? connectionsChangesObserverConstructor() : new Proxy({}, {
get(){ return ()=> {}; } get(){ return ()=> {}; }
}); });
@ -107,7 +107,7 @@ function connectionsChangesObserverConstructor(){
const ls= store.get(element); const ls= store.get(element);
if(!ls.length_c) continue; if(!ls.length_c) continue;
element.dispatchEvent(new Event("dde:connected")); element.dispatchEvent(new Event(evc));
ls.connected= new WeakSet(); ls.connected= new WeakSet();
ls.length_c= 0; ls.length_c= 0;
if(!ls.length_d) store.delete(element); if(!ls.length_d) store.delete(element);
@ -131,7 +131,7 @@ function connectionsChangesObserverConstructor(){
function dispatchRemove(element){ function dispatchRemove(element){
return ()=> { return ()=> {
if(element.isConnected) return; if(element.isConnected) return;
element.dispatchEvent(new Event("dde:disconnected")); element.dispatchEvent(new Event(evd));
store.delete(element); store.delete(element);
}; };
} }

34
src/events.js
View File

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