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

✨ Move reactive element to the S.el

Browse Source 
⇒ cleanup/simplify signal registration
This commit is contained in:
Jan Andrle 2023-09-08 20:16:42 +02:00
parent 8e588b4e41
commit 20e95e33d4
Signed by: jaandrle
GPG Key ID: B3A25AED155AFFAB
3 changed files with 27 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/dom.js
View File

@ -12,16 +12,12 @@ export function createElement(tag, attributes, ...connect){
const s= signals(this);
let el;
//TODO Array.isArray(tag) ⇒ set key (cache els)
if("<>"===tag){
if(s.isReactiveAtrribute(attributes))
return s.reactiveElement(attributes, ...connect);
el= document.createDocumentFragment();
}
if(s.isTextContent(attributes))
attributes= { textContent: attributes };
switch(true){
case typeof tag==="function": el= tag(attributes || undefined); break;
case tag==="#text": el= assign(document.createTextNode(""), attributes); break;
case tag==="<>": el= assign(document.createDocumentFragment(), attributes); break;
case namespace_curr!=="html": el= assign(document.createElementNS(namespace_curr, tag), attributes); break;
case !el: el= assign(document.createElement(tag), attributes);
}
@ -40,8 +36,7 @@ export function assign(element, ...attributes){
/* jshint maxcomplexity:15 */
Object.entries(Object.assign({}, ...attributes)).forEach(function assignNth([ key, attr ]){
if(s.isReactiveAtrribute(attr, key))
attr= s.processReactiveAttribute(element, key, attr, assignNth);
attr= s.processReactiveAttribute(element, key, attr, assignNth);
const [ k ]= key;
if("="===k) return setRemoveAttr(key.slice(1), attr);
if("."===k) return setDelete(element, key.slice(1), attr);

4
src/signals-common.js
View File

@ -1,9 +1,7 @@
import { typeOf } from './helpers.js';
export const signals_global= {
isReactiveAtrribute(attr, key){ return false; },
isTextContent(attributes){ return typeOf(attributes)!=="[object Object]"; },
processReactiveAttribute(el, key, attr, assignNth){ return false; },
reactiveElement(attributes, ...connect){ return null; }
processReactiveAttribute(el, key, attr, assignNth){ return attr; },
};
export function registerReactivity(def, global= true){
if(global) return Object.assign(signals_global, def);

46
src/signals-lib.js
View File

@ -39,6 +39,7 @@ S.symbols= {
};
S.clear= function(...signals){
for(const signal of signals){
Reflect.deleteProperty(signal, "toJSON");
const s= signal[mark];
const { onclear }= S.symbols;
if(s.actions && s.actions[onclear])
@ -60,36 +61,36 @@ S.clear= function(...signals){
});
}
};
S.el= function(signal, map){
const mark_start= document.createComment("<#reactive>");
const mark_end= document.createComment("</#reactive>");
const out= document.createDocumentFragment();
out.append(mark_start, mark_end);
const reRenderReactiveElement= v=> {
if(!mark_start.parentNode || !mark_end.parentNode)
return removeSignalListener(signal, reRenderReactiveElement);
let els= map(v);
if(!Array.isArray(els))
els= [ els ];
let el_r= mark_start;
while(( el_r= mark_start.nextSibling ) !== mark_end)
el_r.remove();
mark_start.after(...els);
};
addSignalListener(signal, reRenderReactiveElement);
reRenderReactiveElement(signal());
return out;
};
import { typeOf } from './helpers.js';
export const signals_config= {
isReactiveAtrribute(attr, key){ return isSignal(attr); },
isTextContent(attributes){
return typeOf(attributes)==="string" || ( isSignal(attributes) && typeOf(valueOfSignal(attributes))==="string" );
},
processReactiveAttribute(_, key, attrS, assignNth){
if(!isSignal(attrS)) return attrS;
addSignalListener(attrS, attr=> assignNth([ key, attr ]));
return attrS();
},
reactiveElement(signal, map){
const mark_start= document.createComment("<#reactive>");
const mark_end= document.createComment("</#reactive>");
const out= document.createDocumentFragment();
out.append(mark_start, mark_end);
const reRenderReactiveElement= v=> {
if(!mark_start.parentNode || !mark_end.parentNode)
return removeSignalListener(signal, reRenderReactiveElement);
let els= map(v);
if(!Array.isArray(els))
els= [ els ];
let el_r= mark_start;
while(( el_r= mark_start.nextSibling ) !== mark_end)
el_r.remove();
mark_start.after(...els);
};
addSignalListener(signal, reRenderReactiveElement);
reRenderReactiveElement(signal());
return out;
}
};
@ -108,8 +109,9 @@ function toSignal(signal, value, actions){
actions= {};
signal[mark]= {
value, actions,
listeners: new Set(),
listeners: new Set()
};
signal.toJSON= ()=> signal();
Object.setPrototypeOf(signal[mark], protoSigal);
return signal;
}