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

✨ Add on.disconnectedAsAbort(), pushRoot() to scope (and 🐛 pop)

Browse Source
This commit is contained in:
Jan Andrle
2023-11-17 14:48:11 +01:00
parent 5008b56ac8
commit 40780bd61f
11 changed files with 69 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
examples/components/fullNameComponent.js
View File

@ -10,8 +10,10 @@ export function fullNameComponent(){
const name= labels.map(_=> S(""));
const full_name= S(()=>
name.map(l=> l()).filter(Boolean).join(" ") || "-");
scope.host(on.connected(()=> console.log(fullNameComponent)));
scope.host(on.disconnected(()=> console.log(fullNameComponent)))
scope.host(
on.connected(()=> console.log(fullNameComponent)),
on.disconnected(()=> console.log(fullNameComponent))
);
const elSVG= elNS("http://www.w3.org/2000/svg");
return el("div", { className }).append(

16
examples/components/webComponent.js
View File

@ -23,17 +23,19 @@ export class CustomHTMLTestElement extends HTMLElement{
render({ test }){
console.log(scope.state);
scope.host(on.connected(()=> console.log(CustomHTMLTestElement)));
scope.host(on.attributeChanged(e=> console.log(e)));
scope.host(on.disconnected(()=> console.log(CustomHTMLTestElement)));
scope.host(
on.connected(()=> console.log(CustomHTMLTestElement)),
on.attributeChanged(e=> console.log(e)),
on.disconnected(()=> console.log(CustomHTMLTestElement))
);
const name= S.attribute("name");
const preName= S.attribute("pre-name");
console.log({ name, test, preName});
return el("p").append(
el("#text", { textContent: name }),
el("#text", { textContent: test }),
el("#text", { textContent: preName }),
el("#text", name),
el("#text", test),
el("#text", preName),
el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName("Ahoj") })
);
}
@ -48,7 +50,7 @@ lifecycleToEvents(CustomHTMLTestElement)
customElements.define(CustomHTMLTestElement.tagName, CustomHTMLTestElement);
function customElementRender(_this, render){
scope.push({ scope: _this, host: (...a)=> a.length ? a[0](_this) : _this, custom_element: _this });
scope.push({ scope: _this, host: (...c)=> c.length ? c.forEach(c=> c(_this)) : _this, custom_element: _this });
const out= render(_this);
scope.pop();
return out;