jaandrle/deka-dom-el
1
0
Fork 0
mirror of https://github.com/jaandrle/deka-dom-el synced 2025-07-01 12:22:15 +02:00
Code Packages Releases Activity

S.attribute is the best option

Browse Source
This commit is contained in:
Jan Andrle
2023-11-22 21:29:40 +01:00
parent 10ed0802f2
commit efc5c34fc4
10 changed files with 58 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/dom.js
View File

@ -151,6 +151,11 @@ export function empty(el){
Array.from(el.children).forEach(el=> el.remove());
return el;
}
export function elementAttribute(element, op, key, value){
if(element instanceof HTMLElement)
return element[op+"Attribute"](key, value);
return element[op+"AttributeNS"](null, key, value);
}
import { isUndef } from "./helpers.js";
//TODO add cache? `(Map/Set)<el.tagName+key,isUndef>`
function isPropSetter(el, key){

25
src/signals-lib.js
View File

@ -85,7 +85,7 @@ S.clear= function(...signals){
}
};
const key_reactive= "__dde_reactive";
import { el } from "./dom.js";
import { el, elementAttribute } from "./dom.js";
import { scope } from "./dom.js";
S.el= function(signal, map){
const mark_start= el.mark({ type: "reactive" }, false);
@ -113,9 +113,20 @@ S.el= function(signal, map){
};
import { on } from "./events.js";
const key_attributes= "__dde_attributes";
S.fromAttribute= function(element, name, value){
if(!element[key_attributes]){ // needs registration
element[key_attributes]= {};
S.attribute= function(name, initial= null){
//TODO host=element & reuse existing
const out= S(initial);
let element;
scope.host(el=> {
element= el;
if(elementAttribute(element, "has", name)) out(elementAttribute(element, "get", name));
else if(initial!==null) elementAttribute(element, "set", name, initial);
if(el[key_attributes]){
el[key_attributes][name]= out;
return;
}
element[key_attributes]= { [name]: out };
on.attributeChanged(function attributeChangeToSignal({ detail }){
/*! This maps attributes to signals (`S.attribute`).
* Investigate `__dde_attributes` key of the element.*/
@ -128,14 +139,12 @@ S.fromAttribute= function(element, name, value){
* Investigate `__dde_attributes` key of the element.*/
S.clear(...Object.values(element[key_attributes]));
})(element);
}
const store= element[key_attributes];
const out= Reflect.has(store, name) ? Reflect.get(store, name) : (store[name]= S(value));
});
return new Proxy(out, {
apply(target, _, args){
if(!args.length) return target();
const value= args[0];
return element.setAttribute(name, value);
return elementAttribute(element, "set", name, value);
}
});
};