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

📦 dist and experiments

Browse Source
This commit is contained in:
Jan Andrle
2023-09-08 20:18:58 +02:00
parent 20e95e33d4
commit 7d5f3d17ae
7 changed files with 505 additions and 504 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
test/components/todosComponent.js
View File

@ -10,16 +10,18 @@ const className= style.host(todosComponent).css`
:host button{
margin-inline-start: 1em;
}
:host output{
white-space: pre;
}
`;
/** @param {{ todos: string[] }} */
export function todosComponent({ todos= [ "A" ] }= {}){
export function todosComponent({ todos= [ "Task A" ] }= {}){
const todosS= S([], {
add(v){ this.value.push(S(v)); },
remove(i){ this.value.splice(i, 1); },
[S.symbols.onclear](){ S.clear(...this.value); },
});
todos.forEach(v=> S.action(todosS, "add", v));
console.log(todosS); //TODO
const name= "todoName";
const onsubmitAdd= on("submit", event=> {
const value= event.target.elements[name].value;
@ -33,16 +35,18 @@ export function todosComponent({ todos= [ "A" ] }= {}){
S.action(todosS, "remove", event.detail));
const ul_todos= el("ul").append(
el("<>", todosS,
ts=> ts.map((t, i)=> el(todoComponent, { textContent: t, value: i, className }, onremove))
S.el(todosS, ts=> ts
.map((textContent, value)=>
el(todoComponent, { textContent, value, className }, onremove))
));
return el("div", { className }).append(
el("div").append(
el("h2", "Todos:"),
el("h3", "List of todos:"),
el("<>", todosS, ts=> !ts.length
S.el(todosS, ts=> !ts.length
? el("p", "No todos yet")
: ul_todos)
: ul_todos),
el("p", "Click to the text to edit it.")
),
el("form", null, onsubmitAdd).append(
el("h3", "Add a todo:"),
@ -50,13 +54,17 @@ export function todosComponent({ todos= [ "A" ] }= {}){
el("input", { name, type: "text", required: true }),
),
el("button", "+")
),
el("div").append(
el("h3", "Output (JSON):"),
el("output", S(()=> JSON.stringify(todosS, null, "\t")))
)
)
}
/**
* @type {ddeFires<[ "click" ]>}
* @param {{
* textContent: string | ddeSignal<string, any>
* textContent: ddeSignal<string, any>
* value: number
* }}
* */
@ -68,8 +76,16 @@ function todoComponent({ textContent, value }){
event.stopPropagation();
ref().dispatchEvent(new CustomEvent("remove", { detail: value }));
});
const is_editable= S(false);
const onedited= on("change", ev=> {
textContent(ev.target.value);
is_editable(false);
});
return el("li", null, ref).append(
el("#text", textContent),
S.el(is_editable, is=> is
? el("input", { value: textContent(), type: "text" }, onedited)
: el("span", textContent, on("click", ()=> is_editable(true))),
),
el("button", { type: "button", value, textContent: "-" }, onclick)
);
}

4
test/exports.js
View File

@ -1,12 +1,12 @@
import { namespace, el, assign, on, registerReactivity } from "../index.js";
import { S } from "../src/signals.js";
import { S, isSignal } from "../src/signals.js";
// import { empty, namespace, on, dispatch } from "../index.js";
// import "../dist/dde-with-signals.js";
// Object.assign(globalThis, dde);
// import { el, on, off, S } from "../dist/esm-with-signals.js";
const style= createStyle();
Object.assign(globalThis, { S, el, assign, namespace, on, registerReactivity, style });
export { S, el, on, registerReactivity, style };
export { S, isSignal, el, on, registerReactivity, style };
function createStyle(){
const element= el("style");

21
test/index-nosignals.html Normal file
View File

@ -0,0 +1,21 @@
<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- DEL CSP https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP | https://github.com/Prinzhorn/minimal-csp -->
<!-- DEL https://github.com/jensimmons/cssremedy -->
<!-- <link rel="stylesheet" href="https://github.com/jensimmons/cssremedy/raw/master/css/remedy.css"> -->
<title>Small DOM element creation enhancements</title>
<meta name="description" content="Making creatig elements easier">
<script type="module">
import { el } from "../index.js";
document.body.append(
el("p", { textContent: "Ahoj", style: { color: "green" } })
);
</script>
</head>
<body>
</body>
</html>