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

✨ ♻️ Update scope and namespace handling (scope hook)

Browse Source
This commit is contained in:
Jan Andrle
2023-10-10 10:55:00 +02:00
parent ebbb76e9a0
commit 6a52972373
8 changed files with 693 additions and 619 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
examples/components/fullNameComponent.js
View File

@ -1,17 +1,17 @@
import { style, el, on, S } from '../exports.js';
import { style, el, on, S, scope } from '../exports.js';
const className= style.host(fullNameComponent).css`
:host form{
display: flex;
flex-flow: column nowrap;
}
`;
export function fullNameComponent(_, scope){
export function fullNameComponent(){
const labels= [ "Name", "Surname" ];
const name= labels.map(_=> S(""));
const full_name= S(()=>
name.map(l=> l()).filter(Boolean).join(" ") || "-");
scope(on.connected(()=> console.log(fullNameComponent)));
scope(on.disconnected(()=> console.log(fullNameComponent)))
scope.host(on.connected(()=> console.log(fullNameComponent)));
scope.host(on.disconnected(()=> console.log(fullNameComponent)))
return el("div", { className }).append(
el("h2", "Simple form:"),

7
examples/components/todosComponent.js
View File

@ -1,4 +1,4 @@
import { style, el, dispatchEvent, on, S } from '../exports.js';
import { style, el, dispatchEvent, on, S, scope } from '../exports.js';
const className= style.host(todosComponent).css`
:host{
display: flex;
@ -18,7 +18,7 @@ const className= style.host(todosComponent).css`
export function todosComponent({ todos= [ "Task A" ] }= {}){
const todosS= S(todos.map(t=> S(t)), {
add(v){ this.value.push(S(v)); },
remove(i){ this.value.splice(i, 1); },
remove(i){ S.clear(this.value.splice(i, 1)[0]); },
[S.symbols.onclear](){ S.clear(...this.value); },
});
const name= "todoName";
@ -65,7 +65,8 @@ export function todosComponent({ todos= [ "Task A" ] }= {}){
* [ "click" ]
* >}
* */
function todoComponent({ textContent, value }, host){
function todoComponent({ textContent, value }){
const { host }= scope;
const onclick= on("click", event=> {
const value= Number(event.target.value);
event.preventDefault();

15
examples/components/webComponent.js
View File

@ -1,4 +1,4 @@
import { el } from "../../index.js";
import { el, scope } from "../../index.js";
import { S } from "../../signals.js";
const { hasOwnProperty }= Object.prototype;
@ -16,9 +16,10 @@ export class CustomHTMLTestElement extends HTMLElement{
);
}
render({ name, test, preName }, host){
host(on.connected(()=> console.log(CustomHTMLTestElement)));
host(on.disconnected(()=> console.log(CustomHTMLTestElement)));
render({ name, test, preName }){
console.log(scope.state);
scope.host(on.connected(()=> console.log(CustomHTMLTestElement)));
scope.host(on.disconnected(()=> console.log(CustomHTMLTestElement)));
return el("p").append(
el("#text", { textContent: name }),
el("#text", { textContent: test }),
@ -36,8 +37,10 @@ customElementsAssign(
customElements.define("custom-test", CustomHTMLTestElement);
function customElementRender(_this, attrs, render){
const host= (...a)=> a.length ? a[0](_this) : _this;
return render(attrs, host);
scope.push({ scope: _this, host: (...a)=> a.length ? a[0](_this) : _this });
const out= render(attrs);
scope.pop();
return out;
}
/** @returns {HTMLElement} */
function customElementsAssign(class_base, ...automatize){