🐛 🚧 connected/disconnected + onAbort

test/components/todosComponent.js

@@ -1,4 +1,4 @@
-import { style, el, on, S } from '../exports.js';
+import { style, el, dispatchEvent, on, S } from '../exports.js';
 const className= style.host(todosComponent).css`
 	:host{
 		display: flex;
@@ -24,12 +24,10 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
 	todos.forEach(v=> S.action(todosS, "add", v));
 	const name= "todoName";
 	const onsubmitAdd= on("submit", event=> {
-		const value= event.target.elements[name].value;
-		if(!value) return;
-		
+		const el= event.target.elements[name];
 		event.preventDefault();
-		S.action(todosS, "add", value);
-		event.target.elements[name].value= "";
+		S.action(todosS, "add", el.value);
+		el.value= "";
 	});
 	const onremove= on("remove", event=>
 		S.action(todosS, "remove", event.detail));
@@ -62,26 +60,25 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
 	)
 }
 /**
- * @type {ddeFires<[ "click" ]>}
- * @param {{
- *	textContent: ddeSignal<string, any>
- *	value: number
- * }}
+ * @type {ddeComponent<
+ *	{ textContent: ddeSignal<string, any>, value: number },
+ *	HTMLLIElement,
+ *	[ "click" ]
+ * >}
  * */
-function todoComponent({ textContent, value }){
-	const ref= S();
+function todoComponent({ textContent, value }, host){
 	const onclick= on("click", event=> {
 		const value= Number(event.target.value);
 		event.preventDefault();
 		event.stopPropagation();
-		ref().dispatchEvent(new CustomEvent("remove", { detail: value }));
+		dispatchEvent(host(), "remove", value);
 	});
 	const is_editable= S(false);
 	const onedited= on("change", ev=> {
 		textContent(ev.target.value);
 		is_editable(false);
 	});
-	return el("li", null, ref).append(
+	return el("li").append(
 		S.el(is_editable, is=> is
 			? el("input", { value: textContent(), type: "text" }, onedited)
 			: el("span", textContent, on("click", ()=> is_editable(true))),

test/components/webComponent.js

@@ -0,0 +1,49 @@
+import { el } from "../../index.js";
+import { S } from "../../src/signals.js";
+Object.assign(S, {
+	customElementParams(_this){
+		console.log("zde");
+		return getAttributes(_this);
+	},
+	customElementPrototype(cls){
+	}
+});
+
+const store= new WeakMap();
+/**
+ * Compatible with `npx-wca test/components/webComponent.js`
+ * @prop {string} test
+ * */
+class CustomHTMLTestElement extends HTMLElement{
+	static get tagName(){
+		return "custom-test";
+	}
+	static get observedAttributes(){
+		return [ "name" ];
+	}
+	constructor(){
+		super();
+		customElementInit(this, this.attachShadow({ mode: "open" }));
+	}
+	connectedCallback(){
+		customElementRender(this, render);
+	}
+}
+S.customElementPrototype(CustomHTMLTestElement);
+customElements.define(CustomHTMLTestElement.tagName, CustomHTMLTestElement);
+
+function render({ name }, host){
+	return el("p", name);
+}
+function customElementInit(_this, root= _this){
+	const host= (...a)=> a.length ? a[0](_this) : _this;
+	store.set(_this, { host, root });
+}
+function customElementRender(_this, render){
+	const { host, root }= store.get(_this);
+	const attrs= S.customElementParams ? S.customElementParams(_this) : getAttributes(_this);
+	root.appendChild(render(attrs, host));
+}
+function getAttributes(_this){
+	return Object.fromEntries(_this.getAttributeNames().map(n=> [ n, _this.getAttribute(n) ]));
+}