1
0
mirror of https://github.com/jaandrle/deka-dom-el synced 2024-11-22 07:49:38 +01:00

Move reactive element to the S.el

⇒ 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

View File

@ -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,7 +36,6 @@ 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);

View File

@ -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);

View File

@ -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,18 +61,7 @@ S.clear= function(...signals){
}); });
} }
}; };
S.el= function(signal, map){
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){
addSignalListener(attrS, attr=> assignNth([ key, attr ]));
return attrS();
},
reactiveElement(signal, map){
const mark_start= document.createComment("<#reactive>"); const mark_start= document.createComment("<#reactive>");
const mark_end= document.createComment("</#reactive>"); const mark_end= document.createComment("</#reactive>");
const out= document.createDocumentFragment(); const out= document.createDocumentFragment();
@ -90,6 +80,17 @@ export const signals_config= {
addSignalListener(signal, reRenderReactiveElement); addSignalListener(signal, reRenderReactiveElement);
reRenderReactiveElement(signal()); reRenderReactiveElement(signal());
return out; return out;
};
import { typeOf } from './helpers.js';
export const signals_config= {
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();
} }
}; };
@ -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;
} }