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

✨ Add signals functionality and reactive attributes in assign

Browse Source
This commit is contained in:
Jan Andrle
2023-08-24 14:15:55 +02:00
parent 7a2c3e6a4b
commit 404971f484
6 changed files with 88 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
test/index.js
View File

@ -1,5 +1,5 @@
import { el, elNS, assign, listen, dispatch } from "../index.js";
Object.assign(globalThis, { el, elNS, assign, listen, dispatch });
import { S, watch, el, elNS, assign, listen, dispatch } from "../index.js";
Object.assign(globalThis, { S, watch, el, elNS, assign, listen, dispatch });
const { style, css }= createStyle();
globalThis.test= console.log;
@ -10,48 +10,39 @@ console.log(app, app instanceof HTMLDivElement);
document.head.append(style);
document.body.append(app);
function component({ value= "World" }= {}){
const name= "naiveForm";
function component({ name= "World", surname= "" }= {}){
const className= "naiveForm";
css`
.${name}{
.${className}{
display: flex;
flex-flow: column nowrap;
}
.${name} input{
.${className} input{
margin-inline-start: .5em;
}
`;
const store= S({ name, surname });
const full_name= S(()=> S(store.name)+" "+S(store.surname));
listen(full_name, console.log);
const output= eventsSink(store=> ({
onchange: listen("change", function(event){
assign(store.element, { textContent: event.target.value });
})
}));
const input= eventsSink(store=> ({
onchange: listen("change", function(event){
assign(store.element, { value: event.detail });
dispatch("change")(input.element);
})
}));
return el("div", { className: name }, input.onchange).append(
return el("div", { className }).append(
el("p").append(
el("#text", { textContent: "Hello " }),
el("strong", { textContent: value }, output.target),
el("strong", { textContent: ()=> S(full_name) }),
el("#text", { textContent: "!" }),
),
el("label").append(
el("#text", { textContent: "Set name:" }),
el("input", { type: "text", value }, output.onchange, input.target)
el("input", { type: "text", value: ()=> S(store.name) },
listen("change", ev=> S(store.name, ev.target.value))),
),
el("label").append(
el("#text", { textContent: "Set surname:" }),
el("input", { type: "text", value: ()=> S(store.surname) },
listen("change", ev=> S(store.surname, ev.target.value))),
)
)
}
function eventsSink(fn){
const store= {
element: null,
target: function(element){ store.element= element; },
};
Object.assign(store, fn(store));
return store;
}
function createStyle(){
const style= el("style");
return {