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

💥 customElement (+enhance slotting simulation) + enh. types

Browse Source
This commit is contained in:
Jan Andrle
2023-12-22 16:49:59 +01:00
parent 64ddd3f41f
commit eb920f7bbd
14 changed files with 161 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
examples/components/fullNameComponent.js
View File

@ -31,7 +31,7 @@ export function fullNameComponent(){
),
elSVG("svg", { viewBox: "0 0 240 80", style: { height: "80px", display: "block" } }).append(
//elSVG("style", { })
elSVG("text", { x: 20, y: 35, textContent: "Text" })
elSVG("text", { x: 20, y: 35, textContent: "Text" }),
)
);
}

49
examples/components/webComponent.js
View File

@ -1,4 +1,4 @@
import { el, on, scope } from "../../index.js";
import { el, on, customElementRender, customElementWithDDE, scope, simulateSlots } from "../../index.js";
import { O } from "../../observables.js";
/**
@ -42,35 +42,24 @@ export class CustomHTMLTestElement extends HTMLElement{
get preName(){ return this.getAttribute("pre-name"); }
set preName(value){ this.setAttribute("pre-name", value); }
}
// https://gist.github.com/WebReflection/ec9f6687842aa385477c4afca625bbf4
lifecycleToEvents(CustomHTMLTestElement)
customElementWithDDE(CustomHTMLTestElement);
customElements.define(CustomHTMLTestElement.tagName, CustomHTMLTestElement);
function customElementRender(_this, render, props= _this){
console.log(_this.shadowRoot, _this.childList);
scope.push({ scope: _this, host: (...c)=> c.length ? c.forEach(c=> c(_this)) : _this, custom_element: _this });
if(typeof props==="function") props= props(_this);
const out= render(props);
scope.pop();
return out;
}
function lifecycleToEvents(class_declaration){
for (const name of [ "connected", "disconnected" ])
wrapMethod(class_declaration.prototype, name+"Callback", function(target, thisArg, detail){
target.apply(thisArg, detail);
thisArg.dispatchEvent(new Event("dde:"+name));
});
const name= "attributeChanged";
wrapMethod(class_declaration.prototype, name+"Callback", function(target, thisArg, detail){
const [ attribute, , value ]= detail;
thisArg.dispatchEvent(new CustomEvent("dde:"+name, {
detail: [ attribute, value ]
}));
target.apply(thisArg, detail);
});
class_declaration.prototype.__dde_lifecycleToEvents= true;
return class_declaration;
}
function wrapMethod(obj, method, apply){
obj[method]= new Proxy(obj[method] || (()=> {}), { apply });
export class CustomSlottingHTMLElement extends HTMLElement{
static tagName= "custom-slotting";
render(){
return simulateSlots(this, el().append(
el("p").append(
"Ahoj ", el("slot", { name: "name", className: "name", textContent: "World" })
),
el("p").append(
"BTW ", el("slot")
)
));
}
connectedCallback(){
this.append(customElementRender(this, this.render));
}
}
customElementWithDDE(CustomSlottingHTMLElement);
customElements.define(CustomSlottingHTMLElement.tagName, CustomSlottingHTMLElement);

8
examples/index.js
View File

@ -2,7 +2,7 @@ import { style, el } from './exports.js';
document.head.append(style.element);
import { fullNameComponent } from './components/fullNameComponent.js';
import { todosComponent } from './components/todosComponent.js';
import { CustomHTMLTestElement } from "./components/webComponent.js";
import { CustomHTMLTestElement, CustomSlottingHTMLElement } from "./components/webComponent.js";
import { thirdParty } from "./components/3rd-party.js";
document.body.append(
@ -10,5 +10,9 @@ document.body.append(
el(fullNameComponent),
el(todosComponent),
el(CustomHTMLTestElement.tagName, { name: "attr" }),
el(thirdParty)
el(thirdParty),
el(CustomSlottingHTMLElement.tagName).append(
el("strong", { slot: "name", textContent: "Honzo" }),
el("span", "…default slot")
)
);