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

🎉

Browse Source
This commit is contained in:
Jan Andrle
2024-01-04 16:05:41 +01:00
parent eb920f7bbd
commit 89f9880277
6 changed files with 42 additions and 17 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;
};
}

3
examples/components/webComponent.js
View File

@ -12,12 +12,13 @@ export class CustomHTMLTestElement extends HTMLElement{
}
connectedCallback(){
if(!this.hasAttribute("pre-name")) this.setAttribute("pre-name", "default");
console.log(observedAttributes(this));
this.attachShadow({ mode: "open" }).append(
customElementRender(this, this.render)
);
}
render({ test }){
render(test){
console.log(scope.state);
scope.host(
on.connected(()=> console.log(CustomHTMLTestElement)),