mirror of
https://github.com/jaandrle/deka-dom-el
synced 2024-11-21 23:39:37 +01:00
✨ Move reactive element to the S.el
⇒ cleanup/simplify signal registration
This commit is contained in:
parent
8e588b4e41
commit
20e95e33d4
@ -12,16 +12,12 @@ export function createElement(tag, attributes, ...connect){
|
|||||||
const s= signals(this);
|
const s= signals(this);
|
||||||
let el;
|
let el;
|
||||||
//TODO Array.isArray(tag) ⇒ set key (cache els)
|
//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))
|
if(s.isTextContent(attributes))
|
||||||
attributes= { textContent: attributes };
|
attributes= { textContent: attributes };
|
||||||
switch(true){
|
switch(true){
|
||||||
case typeof tag==="function": el= tag(attributes || undefined); break;
|
case typeof tag==="function": el= tag(attributes || undefined); break;
|
||||||
case tag==="#text": el= assign(document.createTextNode(""), attributes); 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 namespace_curr!=="html": el= assign(document.createElementNS(namespace_curr, tag), attributes); break;
|
||||||
case !el: el= assign(document.createElement(tag), attributes);
|
case !el: el= assign(document.createElement(tag), attributes);
|
||||||
}
|
}
|
||||||
@ -40,8 +36,7 @@ export function assign(element, ...attributes){
|
|||||||
|
|
||||||
/* jshint maxcomplexity:15 */
|
/* jshint maxcomplexity:15 */
|
||||||
Object.entries(Object.assign({}, ...attributes)).forEach(function assignNth([ key, attr ]){
|
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;
|
const [ k ]= key;
|
||||||
if("="===k) return setRemoveAttr(key.slice(1), attr);
|
if("="===k) return setRemoveAttr(key.slice(1), attr);
|
||||||
if("."===k) return setDelete(element, key.slice(1), attr);
|
if("."===k) return setDelete(element, key.slice(1), attr);
|
||||||
|
@ -1,9 +1,7 @@
|
|||||||
import { typeOf } from './helpers.js';
|
import { typeOf } from './helpers.js';
|
||||||
export const signals_global= {
|
export const signals_global= {
|
||||||
isReactiveAtrribute(attr, key){ return false; },
|
|
||||||
isTextContent(attributes){ return typeOf(attributes)!=="[object Object]"; },
|
isTextContent(attributes){ return typeOf(attributes)!=="[object Object]"; },
|
||||||
processReactiveAttribute(el, key, attr, assignNth){ return false; },
|
processReactiveAttribute(el, key, attr, assignNth){ return attr; },
|
||||||
reactiveElement(attributes, ...connect){ return null; }
|
|
||||||
};
|
};
|
||||||
export function registerReactivity(def, global= true){
|
export function registerReactivity(def, global= true){
|
||||||
if(global) return Object.assign(signals_global, def);
|
if(global) return Object.assign(signals_global, def);
|
||||||
|
@ -39,6 +39,7 @@ S.symbols= {
|
|||||||
};
|
};
|
||||||
S.clear= function(...signals){
|
S.clear= function(...signals){
|
||||||
for(const signal of signals){
|
for(const signal of signals){
|
||||||
|
Reflect.deleteProperty(signal, "toJSON");
|
||||||
const s= signal[mark];
|
const s= signal[mark];
|
||||||
const { onclear }= S.symbols;
|
const { onclear }= S.symbols;
|
||||||
if(s.actions && s.actions[onclear])
|
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';
|
import { typeOf } from './helpers.js';
|
||||||
export const signals_config= {
|
export const signals_config= {
|
||||||
isReactiveAtrribute(attr, key){ return isSignal(attr); },
|
|
||||||
isTextContent(attributes){
|
isTextContent(attributes){
|
||||||
return typeOf(attributes)==="string" || ( isSignal(attributes) && typeOf(valueOfSignal(attributes))==="string" );
|
return typeOf(attributes)==="string" || ( isSignal(attributes) && typeOf(valueOfSignal(attributes))==="string" );
|
||||||
},
|
},
|
||||||
processReactiveAttribute(_, key, attrS, assignNth){
|
processReactiveAttribute(_, key, attrS, assignNth){
|
||||||
|
if(!isSignal(attrS)) return attrS;
|
||||||
addSignalListener(attrS, attr=> assignNth([ key, attr ]));
|
addSignalListener(attrS, attr=> assignNth([ key, attr ]));
|
||||||
return attrS();
|
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= {};
|
actions= {};
|
||||||
signal[mark]= {
|
signal[mark]= {
|
||||||
value, actions,
|
value, actions,
|
||||||
listeners: new Set(),
|
listeners: new Set()
|
||||||
};
|
};
|
||||||
|
signal.toJSON= ()=> signal();
|
||||||
Object.setPrototypeOf(signal[mark], protoSigal);
|
Object.setPrototypeOf(signal[mark], protoSigal);
|
||||||
return signal;
|
return signal;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user