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

23
examples/components/webComponent.js
View File

@ -13,19 +13,19 @@ export class CustomHTMLTestElement extends HTMLElement{
connectedCallback(){
if(!this.hasAttribute("pre-name")) this.setAttribute("pre-name", "default");
this.attachShadow({ mode: "open" }).append(
customElementRender(this, this.render, observedAttributes(S))
customElementRender(this, this.render)
);
}
render({ name, preName }){
const { host }= scope;
const { test }= host();
render({ test }){
console.log(scope.state);
host(
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(
@ -46,7 +46,7 @@ export class CustomHTMLTestElement extends HTMLElement{
lifecycleToEvents(CustomHTMLTestElement)
customElements.define(CustomHTMLTestElement.tagName, CustomHTMLTestElement);
function customElementRender(_this, render, props){
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);
@ -54,17 +54,6 @@ function customElementRender(_this, render, props){
scope.pop();
return out;
}
function observedAttributes(options, element){
const fromAttribute= typeof options==="undefined" ? (_1, _2, v)=> v : ( options.fromAttribute || options );
if(!element) return observedAttributes.bind(null, fromAttribute)
return Object.fromEntries(
element.constructor.observedAttributes
.map(name=> [
name.replace(/-./g, m=> m.slice(1).toUpperCase()),
fromAttribute(element, name, element.getAttribute(name))
])
);
}
function lifecycleToEvents(class_declaration){
for (const name of [ "connected", "disconnected" ])
wrapMethod(class_declaration.prototype, name+"Callback", function(target, thisArg, detail){