🔨 O.observedAttributes, observables

examples/components/todosComponent.js

@@ -37,7 +37,7 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
 			.map((textContent, value)=>
 				el(todoComponent, { textContent, value, className }, onremove))
 	));
-	const ul_todos_v2= (ts)=> el("ul").append(
+	const ul_todos_v2= ts=> el("ul").append(
 		...ts.map((textContent, value)=>
 			el(todoComponent, { textContent, value, className }, onremove))
 	);
@@ -48,7 +48,7 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
 			el("h3", "List of todos:"),
 			O.el(todosO, ts=> !ts.length
 				? el("p", "No todos yet")
-				: ( (ul_todos_version-1) ? ul_todos_v1 : ul_todos_v2(ts) )
+				: ( !(ul_todos_version-1) ? ul_todos_v1 : ul_todos_v2(ts) )
 			),
 			el("p", "Click to the text to edit it.")
 		),

src/dom.js

@@ -114,7 +114,7 @@ createElement.mark= function(attrs, is_open= false){
 	attrs= Object.entries(attrs).map(([ n, v ])=> n+`="${v}"`).join(" ");
 	const end= is_open ? "" : "/";
 	const out= env.D.createComment(`<dde:mark ${attrs}${env.ssr}${end}>`);
-	if(!is_open) out.end= env.D.createComment("</dde:mark>");
+	if(is_open) out.end= env.D.createComment("</dde:mark>");
 	return out;
 };
 export { createElement as el };

src/observables-lib.js

@@ -90,7 +90,7 @@ import { enviroment as env } from "./dom-common.js";
 import { el } from "./dom.js";
 import { scope } from "./dom.js";
 observable.el= function(o, map){
-	const mark_start= el.mark({ type: "reactive" }, false);
+	const mark_start= el.mark({ type: "reactive" }, true);
 	const mark_end= mark_start.end;
 	const out= env.D.createDocumentFragment();
 	out.append(mark_start, mark_end);
@@ -115,35 +115,34 @@ observable.el= function(o, map){
 };
 import { on } from "./events.js";
 import { observedAttributes } from "./helpers.js";
-function observedAttribute(instance, name){
-	const out= (...args)=> !args.length
+const observedAttributeActions= {
+	_set(value){ this.value= value; },
+};
+function observedAttribute(store){
+	return function(instance, name){
+		const varO= (...args)=> !args.length
 			? instance.getAttribute(name)
 			: instance.setAttribute(name, ...args);
-	out.attribute= name;
+		const out= toObservable(varO, varO(), observedAttributeActions);
+		store[name]= out;
 		return out;
+	};
 }
 const key_attributes= "__dde_attributes";
 observable.observedAttributes= function(element){
-	const attrs= observedAttributes(element, observedAttribute);
 	const store= element[key_attributes]= {};
-	const actions= {
-		_set(value){ this.value= value; },
-	};
-	Object.keys(attrs).forEach(name=> {
-		const attr= attrs[name]= toObservable(attrs[name], attrs[name](), actions);
-		store[attr.attribute]= attr;
-	});
+	const attrs= observedAttributes(element, observedAttribute(store));
 	on.attributeChanged(function attributeChangeToObservable({ detail }){
 		/*! This maps attributes to observables (`O.observedAttributes`).
 			* Investigate `__dde_attributes` key of the element.*/
 		const [ name, value ]= detail;
-		const curr= element[key_attributes][name];
+		const curr= this[key_attributes][name];
 		if(curr) return observable.action(curr, "_set", value);
 	})(element);
 	on.disconnected(function(){
 		/*! This removes all observables mapped to attributes (`O.observedAttributes`).
 			* Investigate `__dde_attributes` key of the element.*/
-		observable.clear(...Object.values(element[key_attributes]));
+		observable.clear(...Object.values(this[key_attributes]));
 	})(element);
 	return attrs;
 };
@@ -179,10 +178,10 @@ function removeObservablesFromElements(o, listener, ...notes){
 }
 
 function create(is_readonly, value, actions){
-	const o= is_readonly
-		? ()=> read(o)
-		: (...value)=> value.length ? write(o, ...value) : read(o);
-	return toObservable(o, value, actions);
+	const varO= is_readonly
+		? ()=> read(varO)
+		: (...value)=> value.length ? write(varO, ...value) : read(varO);
+	return toObservable(varO, value, actions);
 }
 const protoSigal= Object.assign(Object.create(null), {
 	stopPropagation(){