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

💥 customElement (#11)

Browse Source 
* 🎉

* Update customElement.js

* 💥 `observedAttributes`
This commit is contained in:
Jan Andrle
2024-01-05 16:49:05 +01:00
committed by GitHub
parent eb920f7bbd
commit e88a495525
14 changed files with 133 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
examples/components/3rd-party.js
View File

@ -1,4 +1,4 @@
import { style, el, O } from '../exports.js';
import { style, el, O, isObservable } from '../exports.js';
const className= style.host(thirdParty).css`
:host {
color: green;
@ -22,12 +22,13 @@ export function thirdParty(){
// Array.from((new URL(location)).searchParams.entries())
// .forEach(([ key, value ])=> O.action(store, "set", key, value));
// O.on(store, data=> history.replaceState("", "", "?"+(new URLSearchParams(JSON.parse(JSON.stringify(data)))).toString()));
useAdapter(store, store_adapter, {
useStore(store_adapter, {
onread(data){
Array.from(data.entries())
.forEach(([ key, value ])=> O.action(store, "set", key, value));
return store;
}
});
})();
return el("input", {
className,
value: store().value(),
@ -36,9 +37,14 @@ export function thirdParty(){
});
}
function useAdapter(observable, adapter, { onread, onbeforewrite }= {}){
if(!onread) onread= observable;
function useStore(adapter_in, { onread, onbeforewrite }= {}){
const adapter= typeof adapter_in === "function" ? { read: adapter_in } : adapter_in;
if(!onread) onread= O;
if(!onbeforewrite) onbeforewrite= data=> JSON.parse(JSON.stringify(data));
onread(adapter.read()); //TODO OK as synchronous
O.on(observable, data=> adapter.write(onbeforewrite(data)));
return function useStoreInner(data_read){
const observable= onread(adapter.read(data_read)); //TODO OK as synchronous
if(adapter.write && isObservable(observable))
O.on(observable, data=> adapter.write(onbeforewrite(data)));
return observable;
};
}

21
examples/components/webComponent.js
View File

@ -13,24 +13,29 @@ 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)
customElementRender(this, this.render, this.attributes)
);
}
render({ test }){
attributes(element){
const observed= O.observedAttributes(element);
return Object.assign({ test: element.test }, observed);
}
render({ name, preName, test }){
console.log(scope.state);
scope.host(
on.connected(()=> console.log(CustomHTMLTestElement)),
on.attributeChanged(e=> console.log(e)),
on.disconnected(()=> console.log(CustomHTMLTestElement))
);
const name= O.attribute("name");
const preName= O.attribute("pre-name");
console.log({ name, test, preName});
const text= text=> el().append(
el("#text", text),
" | "
);
return el("p").append(
el("#text", name),
el("#text", preName),
text(test),
text(name),
text(preName),
el("button", { type: "button", textContent: "pre-name", onclick: ()=> preName("Ahoj") })
);
}